以使下拉列表在单击另一个元素时隐藏

to make a dropdown hide on click of another element

本文关键字：元素 隐藏 另一个 单击 下拉列表      更新时间：2023-09-26

我的代码中几乎没有td。

场景是当我点击一个td时，需要显示加载时隐藏的td下方的内容。

我对下拉列表中的元素几乎没有要处理的事件。

我对所有td都使用了相同的结构，问题是当我单击第一个 td 时，会出现下拉列表，当我单击第二个td时，第二个td中编码的下拉元素也会出现。

我的情况是，当我单击任何td时，应该单独显示该td下方的下拉列表，如果显示它们，另一个下拉列表应该消失。

我的代码如下：

$("#timeofday p").bind('click',function(event){
    $(this).parent().find(" > .dropdown").slideToggle();    
    $(this).text($(this).text() == 'CLOSE' ? 'AFTERNOON' : 'CLOSE'); 
});

我的 HTML 如下：

<tr>
<td  id="timeofday" class="avbltyltblue">
<p>AFTERNOON</p>
<div id="dropdown" class="dropdown">
<div style="padding:10px 0"><button class="up" style="width:100px">UP</button></div>
<ul class="tlist">
<li>1:00PM</li>
<li>2:00PM</li>
<li>3:00PM</li>
<li>4:00PM</li>
<li>5:00PM</li>
<li>6:00PM</li>
<li>7:00PM</li>
<li>8:00PM</li>
<li>9:00PM</li>
<li>10:00PM</li>
</ul>
<div style="padding:10px 0"><button class="down" style="width:100px">DOWN</button></div>
</div>
</td>
<td  id="timeofday" class="avbltyltblue">
<p>AFTERNOON</p>
<div id="dropdown" class="dropdown">
<div style="padding:10px 0"><button class="up" style="width:100px">UP</button></div>
<ul class="tlist">
<li>1:00PM</li>
<li>2:00PM</li>
<li>3:00PM</li>
<li>4:00PM</li>
<li>5:00PM</li>
<li>6:00PM</li>
<li>7:00PM</li>
<li>8:00PM</li>
<li>9:00PM</li>
<li>10:00PM</li>
</ul>
<div style="padding:10px 0"><button class="down" style="width:100px">DOWN</button></div>
</div>
</td>
</tr>

嗯，这似乎有效：

$("#timeofday p").click(function(event){    

$("#timeofday .dropdown").slideUp();
$("#timeofday p").text($("#timeofday p").text('CLOSE') );
$(this).parent().find(" > .dropdown").slideToggle();    
$(this).text($(this).text('AFTERNOON') );
});

下面是一个示例 http://jsfiddle.net/9LkDU/4/

onclick -- 通过使用 JS 进行visibility:hidden或display:none来隐藏元素。 

var div  = document.getElementById("idOfYourElementToBeHidden");
div.style.visibility="hidden"; // this preserves the space occupied by the div
div.style.display="none"; // this frees up the space occupied by tat div
相关文章：