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

首先，小提琴。

我会data在您的评论块中添加一个与被点击div的 id 相匹配的属性。span然后，您可以使用数据选择器选择方法以使用匹配属性.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 回答