Question

我正在尝试切换父<li>和<button>样式。

这是我的代码

<script type="text/javascript">
    $(document).ready(function(){
        $(".btn-comments").click(function(){
            $(this).css("border","none");
            $(this).parent().addClass("selected");
            $(".deal-comment-box").slideToggle(function() {

            });
        });
    });
</script>
<div class="comment-tools">
<ul>
    <li>views:<span class="count">10,500</span></li>
    <li><button type="button" class="btn-share">Share</button></li>
    <li><button type="button"  class="btn-flag">Flag</button></li>
    <li><button type="button" class="btn-comments">Comments</button></li>
    <li><button type="button" class="btn-edit">edit</button></li>
    <li><button type="button" class="btn-edit">remove</button></li>
</ul>
</div>
<div class="comment-box">
    <h3>All Comments (12)</h3>
</div>
 <div class="comment-tools">
<ul>
    <li>views:<span class="count">10,500</span></li>
    <li><button type="button" class="btn-share">Share</button></li>
    <li><button type="button"  class="btn-flag">Flag</button></li>
    <li><button type="button" class="btn-comments">Comments</button></li>
    <li><button type="button" class="btn-edit">edit</button></li>
    <li><button type="button" class="btn-edit">remove</button></li>
</ul>
</div>
<div class="comment-box">
    <h3>All Comments (12)</h3>
</div>

以上部分将重复n次。点击评论框<li>下面的<div>点击评论按钮会展开，我正在尝试删除按钮边框，并在切换模式下为<li>提供一些背景信息。

注意：我也需要切换按钮边框和父“选定”类。

你能不能说我做了什么错。

Answer 1

我没有在你的标记或.selected类中看到.deal-comment-box，但是你没有包含css，所以我认为那里有一个。

修改

查看使用的 working jsFiddle demo ：

<script type="text/javascript"> $(document).ready(function(){ $(".btn-comments").click(function(){ $(this) .toggleClass("button-clicked") .parent().toggleClass("selected") .parent().next().toggle(); }); }); </script>

有人可能能够对此进行优化，但至少它适用于您的标记。

Answer 2

如果border和selected类需要切换，那么您应该在按钮上挂钩toggle()事件处理程序而不是click()：

$(document).ready(function(){
    $(".btn-comments").toggle(function(){
        $(this).css("border","none");
        $(this).parent().addClass("selected");
        $(".deal-comment-box").slideToggle();
    },
    function(){
        $(this).css("border","<set-it-back-to-original>");
        $(this).parent().removeClass("selected");
        $(".deal-comment-box").slideToggle();
    });
});

尝试在jquery toggle（）上为父标记应用css / style

2 个答案: