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展開/摺疊？

回答

相關問題