我有以下HTML和JS.当您单击.slidedown-toggle时,它将在其父级(.slidedown)上切换类打开",并将高度应用于其同级(.nav-sub).这是可行的,但是当不存在"open"类时,将高度设置回0是不可行的.我想念什么?
I have the following HTML and JS. When you click the .slidedown-toggle it toggles the class 'open' on it's parent (.slidedown) and applies the height to it's sibling (.nav-sub). This is working, but what isn't working setting the height back to 0 when that 'open' class isn't present. What am I missing?
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>JS
$(function navCollapse(){ var slidedownToggle = $( '#global-nav .slidedown-toggle' ); slidedownToggle.click( function() { var slidedown = $(this).parent( '.slidedown' ); var navOpen = $( '#global-nav li.open' ); var subnav = $(this).siblings( '.nav-sub' ); var subnavHeight = subnav.height(); slidedown.toggleClass( 'open' ); if (navOpen){ subnav.height( subnavHeight ); }else{ subnav.height( 0 ); } }); });推荐答案
$( '#global-nav li.open' )将返回一个始终为真的jQuery对象,您需要检查当前切换元素所属的li是否具有该类打开.
$( '#global-nav li.open' ) will return a jQuery object which will always be truthy, you need to check whether the li to which current toggle element belongs to has the class open.
您可以使用.closest()查找li元素,然后使用.hasClass()检查该类是否存在
You can use .closest() to find the li element and then use .hasClass() to check whether the class is present
$(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); } }); });更多推荐
切换课程后将身高设定回零
发布评论