jQuery를 토글 스팬 액션에/숨기기를 보여

Question

나는 다음과 같은 목록이 : 나는 토글 쇼/closeBox

주의 행동의 클릭에 <div>comment_actions을 숨길 수있는 방법

<div id="topicListContainter"> 
      <ul id="sList" class="sList"> 
        <li id="itemList_11"> 
         0. updated <span class="closeBox" id="11" ><img src="images/close.png"></span>         
         <div id="comment_actions" class="comment_actions" style="display: none; margin: 5px"><textarea style="width: 100%"></textarea> 
          <br> 
          <input type="text" id="date" class="date" /> <input style="margin: 5px" type="button" class="button blue" value="Save" /> 
         </div> 
        </li> 
        <li id="itemList_27"> 
         1. Sta ima <span class="closeBox" id="27" ><img src="images/close.png"></span>         
         <div id="comment_actions" class="comment_actions" style="display: none; margin: 5px"><textarea style="width: 100%"></textarea> 
          <br> 
          <input type="text" id="date" class="date" /> <input style="margin: 5px" type="button" class="button blue" value="Save" /> 
         </div> 
        </li> 
        <li id="itemList_26"> 
         2. Update 22 <span class="closeBox" id="26" ><img src="images/close.png"></span>         
         <div id="comment_actions" class="comment_actions" style="display: none; margin: 5px"><textarea style="width: 100%"></textarea> 
          <br> 
          <input type="text" id="date" class="date" /> <input style="margin: 5px" type="button" class="button blue" value="Save" /> 
         </div> 
        </li> 
         ..... 

를 :

,557,251 : 각 <li>는 자신의 comment_actions DIV 같은

지금까지 내가 시도 뭔가가

Answer 1

첫째, the fiddle.

는

나는 당신의 의견에 클릭되는 span의 ID와 일치 div 블록을 data 속성을 추가 할 수 . 그런 다음 .toggle() 메서드를 선택하여 데이터 선택자를 사용하여 일치하는 data 속성으로 원하는만큼 다른 많은 div 블록을 숨길 수 있습니다.

또한 closebox 범위에서 display:none;을 제거하여 실제로 클릭 할 수 있습니다.

0. updated 
<!-- Note the data-comments property added here --> 
<span class="closeBox" id="11" data-comments="11" > 
    <img src="images/close.png"> 
</span>         

<!-- Note the data-comments property added here --> 
<div id="comment_actions" data-comments="11" class="comment_actions" style="display: none; margin: 5px"> 
    <textarea style="width: 100%"></textarea> 
    <br> 
    <input type="text" id="date" class="date" /> 
    <input style="margin: 5px" type="button" class="button blue" value="Save" /> 
</div>​ 

$(document).ready(function(e) { 
    $('.closeBox').on('click', function(e) { 
     e.preventDefault(); 
     var $target = $(e.target).parent(); 
     $('div[data-comments="' + $target.data('comments') + '"]').toggle(); 
    }); 
});​ 

Answer 2

코드가 닫 혔습니다.

는 span.closedBox에서 display: none를 제거하고 이것을 시도 :

jQuery('.closeBox').live('click', function() { 
     jQuery(this).next('div.comment_actions').toggle(); 
}); 

을 또한, 두 개 이상의 요소에 속성 id 값을 사용하지 마십시오. (id없이 중복)

Answer 3

$('.closeBox').bind('click', function() { 
    $('.comment_actions').toggle(); 
}); 

이 좀 더 기능 점검을 원하는 경우 :

http://api.jquery.com/toggle/