다른 요소를 클릭 할 때 드롭 다운을 숨기려면

Question

내 코드에는 td이 거의 없습니다.

td을 클릭하면로드시 숨겨져있는 td 아래의 내용이 표시되어야합니다.

드롭 다운의 요소로 처리 할 이벤트가 거의 없습니다. I는 제 TD 클릭하면 I 모든 td들에 대해 동일한 구조를 사용한

는 문제가 드롭 나타나고 I 번째 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

온 클릭 - .. 그 visibility:hidden 또는 JS와 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