ドロップダウンメニューで応答して子要素を非表示にして表示する

Question

デスクトップに子リンクを自動的に表示する親カテゴリを持つドロップダウンメニューがあり、クリックされるまでモバイルで非表示にします。ウィンドウのサイズがバックアップされている場合、子供は再び表示されます。

これはほとんど機能しますが、ウィンドウのサイズを変更した後、デスクトップ上の親カテゴリをクリックすると、子要素をslideToggleします。また、1つではなく、複数のslideToggleイベントをリサイズ後に実行します。

私は、slideToggle（）のインスタンスが2つある可能性が高いと認識していますが、1つまたは他のインスタンスを削除する際に問題が発生していました。モバイルでは決してオープンしないことがあるので、両方のインスタンスを入れてみると、これが解決されています。

私は、あまり肥大化していない完全に機能するソリューションを探しています。私はすべての助けに感謝し、私は答えから知識を得ることを望む。

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'); 
    } 
});