Question

我有以下列表：

    <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_actions div

到目前为止，我尝试过类似的事情：

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

Answer 1

首先，the fiddle。

我会在您的评论data块中添加div属性，这些块与所点击的span的ID相匹配。然后，您可以使用数据选择器选择.toggle()方法以显示隐藏尽可能多的其他div块以及匹配的data属性。

我还从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();
    });
});

Answer 2

你的代码很接近。

从display: none移除span.closedBox，然后尝试：

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/

jQuery切换显示/隐藏跨度动作

3 个答案: