在下拉菜單中響應地隱藏和顯示子元素

Question

我有一個下拉菜單，其父類別在桌面上自動顯示子項鍊接，並將它們隱藏在移動設備上直到它們被點擊。如果窗戶大小適中，孩子們再次出現。

這幾乎可以工作，但在調整窗口大小後，如果我單擊桌面上的父類別，它將滑動切換子元素。它還將在調整大小後運行多個slideToggle事件，而不僅僅是一次。

我知道這可能是由於有兩個slideToggle（）實例，但我在刪除一個或其他實例時遇到問題。有時他們永遠不會在手機上打開，所以我發現把這兩個實例解決了。

我正在尋找一個臃腫和功能完善的解決方案。我感謝所有幫助，我希望從答案中獲得知識。

CodePen

//Start Ignore 
 
$('li.dropdown a').on('click', function (event) { 
 
\t $(this).parent().toggleClass('open'); 
 
}); 
 

 
$('body').on('click', function (e) { 
 
if (!$('li.dropdown').is(e.target) 
 
    && $('li.dropdown').has(e.target).length === 0 
 
    && $('.open').has(e.target).length === 0 
 
) { 
 
    $('li.dropdown').removeClass('open'); 
 
} 
 
}); 
 
//End Ignore 
 

 
/**** CODE I NEED HELP WITH BELOW ****/ 
 

 
$(window).resize(function(){ 
 
\t if ($(window).width()<768){ 
 
\t 
 
\t \t $('.top-nav-link').on('click', function(event){ 
 
\t \t \t event.preventDefault(); 
 
\t \t \t $(this).parent().parent().find('.dropdown-nested-links').slideToggle(); 
 
\t \t \t console.log('I worked.'); 
 
\t \t }); 
 
\t 
 
\t }else{ 
 
\t \t $('.dropdown-nested-links').css('display', 'inline-block'); 
 
\t \t 
 
\t } 
 
}); 
 

 
if ($(window).width()<768){ 
 
\t $('.top-nav-link').on('click', function(event){ 
 
\t \t event.preventDefault(); 
 
\t \t $(this).parent().parent().find('.dropdown-nested-links').slideToggle(); 
 
\t }); 
 

 
}else{ 
 
\t $('.dropdown-nested-links').css('display', 'inline-block'); 
 
\t 
 
} 
 

 
$(window).resize(function(){ 
 
\t if ($(window).width()>768){ 
 
\t \t //Expands the links when resized back to Desktop 
 
\t \t $('.dropdown-nested-links').css('display', 'inline-block'); 
 
\t }else{ 
 
\t \t //Hides the category dropdown when resized back down to mobile 
 
\t \t $('.dropdown-nested-links').css('display','none') 
 
\t } 
 
});

.dropdown-nested-links{ 
 
padding:0; 
 
display:none; 
 
} 
 

 
@media only screen and (min-width:768px){ 
 
    .dropdown-nested-links{ 
 
    padding:0; 
 
    display:inline-block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar navbar-inverse"> 
 

 
<ul class="nav navbar-nav learn-nav"> 
 
    <li class="dropdown"><a href="#" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">Click Me <span class="glyphicon glyphicon-menu-down"></span></a> 
 
    <ul class="dropdown-menu"> 
 
     <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class="col-sm-6 dropdown-section"> 
 
      <li><a href="#" class="top-nav-link">Parent 1</a></li> 
 
      <ul class="dropdown-nested-links"> 
 
      <li><a href="#" class="nested-nav-link"><span></span>Child</a></li> 
 

 
      <li><a href="#" class="nested-nav-link"><span></span>Child</a></li> 
 

 
      <li><a href="#" class="nested-nav-link"><span></span>Child</a></li> 
 
      </ul> 
 

 
     </div> 
 
     <div class="col-sm-6 dropdown-section inverse-section"> 
 
      <li><a class="top-nav-link" href="#">Parent 2</a></li> 
 
      <ul class="dropdown-nested-links"> 
 
      <li><a href="#" class="nested-nav-link"><span></span>Child</a></li> 
 

 
      <li><a href="#" class="nested-nav-link"><span></span>Child</a></li> 
 
     </ul> 
 
    </div> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
    </nav>

Answer 1

您應該刪除點擊事件或讓單擊事件中的條件：

$('.top-nav-link').on('click', function(event){ 
    if ($(window).width()<768){ 
     event.preventDefault(); 
     $(this).parent().parent().find('.dropdown-nested-links').slideToggle(); 
      console.log('I worked.'); 
    } 
}); 

$(window).resize(function(){ 
    if ($(window).width()>=768){ 
     $('.dropdown-nested-links').css('display', 'inline-block'); 
    } 
});