jQuery在點擊時設置了兄弟的高度

Question

之前我詢問this question about setting a height back to 0 after toggling a class。

雖然答案是正確的，但事實證明我的問題並非如此，我回來重新解釋並嘗試解決我的問題。

• 我有一個導航列表和一些項目有內他們一分導航列表
• 每個具有分導航項目有哪些你點擊
• 我想子導航<ul>開始與切換箭頭的高度爲0，而當您單擊切換箭頭我想使用jQuery該子導航的高度設置爲它的計算高度的項目

的HTML是這樣的：

<li class="slidedown"> 
    <a href="#">Parent Link</a> 
    <!-- Dropdown arrow --> 
    <span class="slidedown-toggle"> 
    <span class="caret"></span> 
    </span> 
    <!-- Submenu --> 
    <ul class="nav nav-sub"> 
    <li> 
     <a href="#">Child Menu Item 1</a> 
    </li> 
    </ul> 
</li> 

回答我剛纔的問題給了我這個劇本：

$(function navCollapse() { 

    var slidedownToggle = $('#global-nav .slidedown-toggle'); 

    slidedownToggle.click(function() { 
    var slidedown = $(this).parent('.slidedown'); 
    var $li = $(this).closest('li'); 
    var subnav = $(this).siblings('.nav-sub'); 
    var subnavHeight = subnav.height(); 

    slidedown.toggleClass('open'); 

    if ($li.hasClass('open')) { 
     subnav.height(0); 
    } else { 
     subnav.height(subnavHeight); 
    } 

    }); 

}); 

但我很快意識到，一旦高度已被設置爲0時，無論您點擊多少次，腳本都會繼續將其計算爲0。 這讓我感到困惑和困惑。

舊的Bootstrap摺疊幾乎是我想要的（只有高度改變）。它通過JavaScript設置高度，然後使用CSS進行轉換。儘管我不想讓我的子菜單有display: none。

任何想法？

注意：我不想使用JavaScript動畫。我想爲此使用CSS。 我也不想使用max-height解決方案來使用僅CSS下拉菜單。這是我的後備。

DEMO

Answer 1

有你的代碼的邏輯存在一些問題，所以我做了一些修改。

$(function navCollapse() { 

    var slidedownToggle = $('#global-nav .slidedown-toggle'); 

    slidedownToggle.click(function() { 
     // Get the container item 
     var $slidedown = $(this).parents('.slidedown'); 

     // Get the ul that needs to slide up/down 
     var $subnav = $(this).siblings('.nav-sub'); 

     // Calculate the height required (in px) to show all LIs 
     var totalHeight = 0; 
     $subnav.find('li').each(function() { 
      totalHeight += $(this).height(); 
     }); 

     // Set the appropriate height 
     if ($slidedown.hasClass('open')) { 
      $subnav.css({height: '0px'}); 
     } else { 
      $subnav.css({height: totalHeight + 'px'}); 
     } 
     $slidedown.toggleClass('open'); 

    }); 

}); 

然後在你的CSS確保您應用過渡到.nav-sub：

-webkit-transition: height 0.2s linear; 
-moz-transition: height 0.2s linear; 
-ms-transition: height 0.2s linear; 
-o-transition: height 0.2s linear; 
transition: height 0.2s linear; 

工作例如：

http://jsbin.com/INIwuTA/11/

Answer 2

這裏有一種方法：http://jsfiddle.net/Tes9P/2/

基本上，這個應用程序es過渡到繞過子菜單的包裝div。由於CSS轉換需要設置高度來設置動畫效果（不能將動畫設置爲自動），因此此包裝的高度必須大於最大子菜單的高度。

在我的jsfiddle，我設置了這樣的CSS：

.nav-sub { 
    height:auto; 
    background-color:#eee; 

} 

.nav-sub-holder { 
     -webkit-transition: height 2s ease; 
    -moz-transition: height 2s ease; 
    -o-transition: height 2s ease;  
    transition: height 2s ease; 
    overflow:hidden;  
height:100px; 

} 


.closed { 
    height:0px; 
    overflow:hidden; 

}