jquery展开/折叠？

我试着让我的jQuery扩大的任何地方点击时（除了左上框），并尝试只在（左上框），当点击崩溃jquery展开/折叠？

HTML：

<div id="box"> 
    <div class="collapsed container" > 
     <div class="nav" class="closed">0</div> 
     box 1 - click me  
     <div class="expanded_content"> 
      extra content only for expanded state 
     </div> 
     <div class="collapsed_content"> 
      collapsed only content #1 
     </div> 
    </div> 

    <div class="collapsed container"> 

     <div class="nav" class="closed">0</div> 
     box 2 - click me  
     <div class="expanded_content"> 
      extra content only for expanded state 
     </div> 
    </div> 
    <div class="collapsed container"> 

     <div class="nav" class="closed">0</div> 
     box 3 - click me  
     <div class="expanded_content"> 
      extra content only for expanded state 
     </div> 
    </div> 
</div>

的JavaScript：

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

$("#box").delegate(".container.expanded .nav ", "click", function(e) { 

    $(this).addClass("collapsed"); 
});

似乎是几乎没有，但不大，这将是这样做的正确方法？由于切换似乎不是这里的选项。

来源

2012-03-08 Rubytastic

是否使用.delegate（），因为该元素是不是在页面上开始？此外，自从jQuery 1.7开始，.delegate（）已被弃用，以支持.on（）。 – j08691 2012-03-08 20:25:47

@ j08691 - '委托（）'不被弃用，'活着'是。 – ShankarSangoli 2012-03-08 20:26:31

@ShankarSangoli - 真的吗？请先阅读[docs]（http://api.jquery.com/delegate/）：“从jQuery 1.7开始，.delegate（）已被.on（）方法取代。” – j08691 2012-03-08 20:29:26

在这里你去队友...

$("#box").delegate(".container", "click", function(e) { 
    if ($(e.target).hasClass("container")) { 
     $(this).addClass("expanded"); 
    } 
}); 

$("#box").delegate(".container.expanded .nav", "click", function(e) { 
    $(this).parent().removeClass("expanded"); 
    e.stopPropagation(); 
});

类“坍塌”永远不会被删除，以便删除您需要使用removeClass("expanded")扩张状态，所以它可以追溯到其初始州。此外，单击.nav元素时，要影响的div是父级。

最后，e.stopPropagation()停止点击触发两个事件处理程序并删除类，然后再次添加它。

这里有一个工作的jsfiddle ...

http://jsfiddle.net/wzbAh/11/

来源

2012-03-08 20:33:23 Archer

左上角仍然展开该框：'我试图让我的jquery在任何地方点击展开（除了左上角的框），并且只在（左上框）中点击时尝试折叠' – 2012-03-08 20:37:34

是的确的确有多个框1页这也是首先扩大的问题。 – Rubytastic 2012-03-08 20:42:23

我已经添加了额外的代码来检查被单击的元素是什么，所以它只会在容器时执行。 – Archer 2012-03-08 20:43:56

$("#box").delegate(".container", "click", function(e) { 
    if (!$(e.target).is("div.nav")) { 
     $(this).addClass("expanded"); 
    } 
}); 

$("#box").delegate(".container .nav ", "click", function(e) { 
    $(this).parent().removeClass("expanded").addClass("collapsed"); 
});

http://jsfiddle.net/jensbits/wzbAh/9/

来源

2012-03-08 20:33:24

jquery展开/折叠？

回答

相关问题