Question

我的代码中只有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>

Answer 1

嗯，这似乎有效：

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

的示例

Answer 2

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

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

2 个答案: