Javascript 单击其他元素时隐藏下拉列表的步骤

我的代码中几乎没有

td

该场景是，当我单击

td

时，需要显示加载时隐藏的

td

下方的内容

我有几个事件要处理下拉列表中的元素

我对所有的

td

s使用了相同的结构，问题是当我单击第一个td时，会出现下拉列表，当我单击第二个

td

时，第二个

td

中编码的下拉列表元素也会出现

我的情况是，当我单击任何

td

时，下面显示的下拉列表应该只显示

td

，如果显示，则其他下拉列表应该消失

我的代码如下：

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

<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>

我的html如下所示：

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

<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>

下午

向上的

下午1:00
下午2:00
下午三点
下午四点
下午五点
下午六点
下午7:00
晚上八点
晚上九点
晚上10:00

向下
下午

向上的

下午1:00
下午2:00
下午三点
下午四点
下午五点
下午六点
下午7:00
晚上八点
晚上九点
晚上10:00

向下

好吧，这似乎有效：

$("#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') );
});

下面是一个例子

onclick——通过JS使元素的

可见性：hidden

或

显示：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

---

我的错！我忘了在html中添加表。问题是，如果我单击第一个td，即使单击第二个td，下拉列表也会出现并保持不变。这种情况是，如果我点击第二个td，第一个td上显示的点击事件的下拉列表应该消失。只有第二个td shud中的下拉列表出现…似乎仍然有一个小错误，我正在尝试修复。。当我们点击第一个td时，下拉菜单打开，当我们点击第二个td时，下拉菜单关闭，这是需要的。但是如果我们点击第一个td两次，它就会关闭。但这并没有发生，幻灯片又在切换。。有什么想法吗？嗨，泽伊，谢谢你的密码。我给它添加了一个if条件，这个条件似乎起作用了：）