Question

的CSS：

#container_im.collapsed{
    background-color:red;
    height: 48px;
    margin-bottom: 10px;
    margin-right: 10px;
    width: 227px;
}

#container_im.expanded{
    background-color:green;
    height: 348px;
    margin-bottom: 10px;
    margin-right: 10px;
    width: 227px;
}

#expanded_content{
    height:100px;
    color: yellow;
    display: none;
}

//default state
//expand box
#nav.closed {
    height:20px;
    width:20px;
    background-color: black;
    color:white;
}

#nav.opened {
    height:20px;
    width:20px;
    background-color: white;
    color:black;   
}

HTML：

<div id="container_im" class="collapsed" >


    <div id="nav" class="closed">0</div>
    box 1 - click me    

    <div id="expanded_content">
        extra content only for collapsed state
    </div>

</div>

JS：

    <div id="nav" class="closed">0</div>
    box 2 - click me    

    <div id="expanded_content">
        extra content only for collapsed state
    </div>

</div>




***//
$(document).bind("click", function(e) {
    $(e.target).closest("#container_im").toggleClass("expanded");
    $(e.target).closest("#expanded_content").show();
     $(e.target).closest("#nav").toggleClass("closed");
});***

http://jsfiddle.net/NsBWy/14/

任何可以帮我修复这个jquery代码的JS大师？

尝试显示文本#expanded_content，仅在单击所选框时显示。并在另一次点击（切换）
尝试重新设置#nav div，只显示当前点击的

欢迎任何有关如何使其变得更好的好主意，在尝试手册中的一些内容之后，我有点坚持如何实现上述功能，这是我目前没有看到的功能组合。

Answer 1

你的方法有很多问题。看看这个有用的jsFiddle然后我会写一些你错的东西：

http://jsfiddle.net/jfriend00/A9rKm/

$("#box").delegate(".container", "click", function(e) {
    $(this).toggleClass("expanded collapsed");
});

你错了：

您只能拥有一个具有给定ID的对象，因此您应该使用类名，而不是常用元素的ID。
您可以使用this访问点击的项目。
如果可以避免，请不要在文档上放置事件处理程序。我创建了一个可以放置事件处理程序的公共父级，然后使用您选择的jQuery版本中的.delegate()（1.5）来自动过滤它们。使用jQuery 1.7+，您可以使用.on()代替.delegate()。
您可以使用多个类.toggleClass()来同时切换多个班级。
.closest()查找父链，而不是其他任何地方。如果您正在寻找特定类型的孩子，请使用.find()。
您不需要使用那么多指示打开/关闭状态的单独类。 CSS可以为所有子项使用共同父项上的一个类。因此，我能够消除所有其他课程的变化。
CSS评论的格式必须为/* comment here */。您无法使用//进行CSS评论。

Jquery折叠/扩展器需要几个“崩溃”检查

1 个答案: