使下拉隐藏点击另一个元素

我的代码中有几个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'); 
});

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

来源

2012-02-19 Dinesh Teddy

那么，这似乎工作：

$("#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/

来源

2012-02-19 08:50:28

我的坏！我忘了在我的html中添加表格。概率是说，如果我点击第一个td，下拉菜单出现并保持即使我点击第二个td。该场景是，如果我点击第二个td，则在第一个td上单击事件的bcoz显示的下拉列表应该消失。只有在第二个td shud出现下拉... – 2012-02-19 09:01:11

看到更新的答案和小提琴。 – 2012-02-19 09:07:52

完美的工作:)谢谢Zee Tee :) – 2012-02-19 09:18:40

onclick - 隐藏元素使其visibility:hidden或display:none与JS ..

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

来源

2012-02-19 08:51:03

使下拉隐藏点击另一个元素

回答

相关问题