Jquery的几个 '雪崩' 需要检查折叠/膨胀

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以仅在所选框被单击时显示。而隐藏在另一个点击（切换）完整#expanded_content股利和所有子
• 试图再整的#nav DIV，只有一个目前点击

如何使它更好是什么好主意也欢迎， 有点卡住了如何实现上述功能后，尝试从手册中的一些事情，我没有看到在这一点上的功能组合。

Answer 1

你的方法有很多错误。在此工作的jsfiddle看看，然后我会再去编写自己一些你有错的事情：

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

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

事情你有错：

1. 你只能有一个对象与给定的ID，所以你应该使用类名称，而不是普通元素的ID。
2. 您可以使用this访问点击的项目。
3. 如果可以避免，您不希望将事件处理程序放在文档上。我创建了一个公共父项，可以将事件处理函数放在上面，然后使用您选择的jQuery版本（1.5）中的.delegate()自动为我筛选它们。使用jQuery 1.7+，您可以使用.on()而不是.delegate()。
4. 您可以使用多个类与.toggleClass()一次切换多个类。
5. .closest()查找父链，而不是其他地方。如果您正在寻找特定类型的儿童，请使用.find()。
6. 您不需要使用如此多的单独的类来指示打开/关闭状态。所有孩子都可以使用CSS上的一个共同父类。因此，我能够消除所有其他班级变化。
7. CSS评论的格式必须是/* comment here */。您不能使用//作为CSS评论。