嵌套元素高度不能正確地計算

我使用ul容器，其具有一些li項創建導航結構和li元件具有與toggle類<a>元件。 <a>元素下面還有ul類別名稱爲inner的容器。我正在做的是當我點擊任何一個點擊事件的<a>元素。在這種情況下，我計算inner類的所有兒童的身高，但是當我想將該計算高度設置爲該內部類的css屬性時，它不會完全展開。嵌套元素高度不能正確地計算

見代碼：

function CallBackFunction() { 
 

 
     var elm = $(this); 
 

 
     var height = 0; 
 

 
     elm.next().children().each(function() { 
 

 
      height = height + $(this).outerHeight(true); 
 
     }); 
 

 
     elm.next().css('max-height', height); 
 

 

 
    } 
 

 

 
    $('.toggle').click(CallBackFunction);

 .parent { 
 
      border: 1px solid black; 
 

 
     } 
 

 
     .inner { 
 
      max-height: 0; 
 
      overflow: hidden; 
 
      transition: max-height 300ms ease-in-out; 
 
     } 
 

 
     a:hover { 
 
      cursor: pointer; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<html lang="en"> 
 
<head> 
 
</head> 
 
<body> 
 

 
<ul class="parent"> 
 

 
    <li> 
 
     <a class="toggle">Link 1</a> 
 
     <ul class="inner"> 
 

 
      <li> 
 
       <p>Dummy Text</p> 
 

 
      </li> 
 

 
      <li> 
 
       <a class="toggle">Nested Link</a> 
 
       <div class="inner"> 
 
        <p>Again Dummy Text</p> 
 
       </div> 
 
      </li> 
 

 
     </ul> 
 

 
    </li> 
 
</ul> 
 

 
</body> 
 
</html>

來源

2017-05-15 Timmy Mucks

添加該代碼在CSS

ul.inner>li { 
    float: left; 
    width: 100%; 
}

這裏li是得不到的p高度，因此需要浮動li

function CallBackFunction() { 
 

 
     var elm = $(this); 
 

 
     var height = 0; 
 

 
     elm.next().children().each(function() { 
 

 
      height = height + $(this).outerHeight(true); 
 

 
     }); 
 
     elm.next().css('max-height', height); 
 

 

 
    } 
 

 

 
    $('.toggle').click(CallBackFunction);

.parent { 
 
      border: 1px solid black; 
 

 
     } 
 

 
     .inner { 
 
      max-height: 0; 
 
      overflow: hidden; 
 
      transition: max-height 300ms ease-in-out; 
 
     } 
 
ul.inner>li { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
     a:hover { 
 
      cursor: pointer; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<ul class="parent"> 
 

 
    <li> 
 
     <a class="toggle">Link 1</a> 
 
     <ul class="inner"> 
 

 
      <li> 
 
       <p>Dummy Text</p> 
 

 
      </li> 
 

 
      <li> 
 
       <a class="toggle">Nested Link</a> 
 
       <div class="inner"> 
 
        <p>Again Dummy Text</p> 
 
       </div> 
 
      </li> 
 

 
     </ul> 
 

 
    </li> 
 
</ul>

來源

2017-05-15 09:00:17 Amal

但設置爲浮動後;左點擊'Nested Link'後不會展開。 –

這是因爲，前面的點擊已經爲'ul.inner'設置了'max-height：68px;' – Amal

但是當點擊任何'toggle'類元素時，高度被重置 –

嵌套元素高度不能正確地計算

回答

相關問題