0

次のリストがあります。

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

<div> comment_actionsアクションのクリックで切り替えて表示/非表示にするにはどうすればよいですかcloseBox

注: それぞれ<li>に独自のcomment_actionsdivがあります

これまでのところ、次のようなことを試しました：

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

3 に答える 3

1

まず、フィドル。

クリックされたIDと一致dataするコメントブロックにプロパティを追加します。次に、データセレクターを使用して、一致するプロパティで必要な数の他のブロックを非表示にする方法を選択できます。divspan.toggle()divdata

実際にクリックできるようにdisplay:none;、スパンからも削除しました。closebox

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();
    });
});​
于 2012-07-24T14:38:46.117 に答える
0

あなたのコードは近かった。

display: noneから を削除して、span.closedBoxこれを試してください。

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

idまた、複数の要素で属性値を使用しないでください。( の重複なしid)

于 2012-07-24T14:33:06.363 に答える
0 
$('.closeBox').bind('click', function() {
  $('.comment_actions').toggle();
});

もう少し機能が必要な場合は、これをチェックしてください：

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

于 2012-07-24T14:34:43.133 に答える