ドロップダウンボタンクリックするたびに閉じるドロップダウン

Question

私はインターネット上のテンプレートからドロップダウンを作成しました。ここに私が立ち上がったが、問題がある。問題は、ドロップダウン上の各リンクをクリックするたびに、ドロップダウンが閉じられることです。

jQuery(document).ready(function($){ 
    //open/close mega-navigation 
    $('.cd-dropdown-trigger').on('click', function(event){ 
     event.preventDefault(); 
     toggleNav(); 
    }); 

    //close meganavigation 
    $('.cd-dropdown .cd-close').on('click', function(event){ 
     event.preventDefault(); 
     toggleNav(); 
    }); 

    //on mobile - open submenu 
    $('.has-children').children('a').on('click', function(event){ 
     //prevent default clicking on direct children of .has-children 
     event.preventDefault(); 
     var selected = $(this); 
     selected.next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('move-out'); 
    }); 

    //on desktop - differentiate between a user trying to hover over a dropdown item vs trying to navigate into a submenu's contents 
    var submenuDirection = (!$('.cd-dropdown-wrapper').hasClass('open-to-left')) ? 'right' : 'left'; 
    $('.cd-dropdown-content').menuAim({ 
     activate: function(row) { 
      $(row).children().addClass('is-active').removeClass('fade-out'); 
      if($('.cd-dropdown-content .fade-in').length == 0) $(row).children('ul').addClass('fade-in'); 
     }, 
     deactivate: function(row) { 
      $(row).children().removeClass('is-active'); 
      if($('li.has-children:hover').length == 0 || $('li.has-children:hover').is($(row))) { 
       $('.cd-dropdown-content').find('.fade-in').removeClass('fade-in'); 
       $(row).children('ul').addClass('fade-out') 
      } 
     }, 
     exitMenu: function() { 
      $('.cd-dropdown-content').find('.is-active').removeClass('is-active'); 
      return true; 
     }, 
     submenuDirection: submenuDirection, 
    }); 

    //submenu items - go back link 
    $('.go-back').on('click', function(){ 
     var selected = $(this), 
      visibleNav = $(this).parent('ul').parent('.has-children').parent('ul'); 
     selected.parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out'); 
    }); 

    function toggleNav(){ 
     var navIsVisible = (!$('.cd-dropdown').hasClass('dropdown-is-active')) ? true : false; 
     $('.cd-dropdown').toggleClass('dropdown-is-active', navIsVisible); 
     $('.cd-dropdown-trigger').toggleClass('dropdown-is-active', navIsVisible); 
     if(!navIsVisible) { 
      $('.cd-dropdown').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ 
       $('.has-children ul').addClass('is-hidden'); 
       $('.move-out').removeClass('move-out'); 
       $('.is-active').removeClass('is-active'); 
      }); 
     } 
    } 

    //IE9 placeholder fallback 
    //credits http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html 
    if(!Modernizr.input.placeholder){ 
     $('[placeholder]').focus(function() { 
      var input = $(this); 
      if (input.val() == input.attr('placeholder')) { 
       input.val(''); 
      } 
     }).blur(function() { 
      var input = $(this); 
      if (input.val() == '' || input.val() == input.attr('placeholder')) { 
       input.val(input.attr('placeholder')); 
      } 
     }).blur(); 
     $('[placeholder]').parents('form').submit(function() { 
      $(this).find('[placeholder]').each(function() { 
       var input = $(this); 
       if (input.val() == input.attr('placeholder')) { 
        input.val(''); 
       } 
      }) 
     }); 
    } 
}); 

HTMLコード

<div class="cd-dropdown-wrapper nav-div cd-dropdown-trigger" href="#0" id="nav-icon2"> 

    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <nav class="cd-dropdown"> 
    <h2>Title</h2> 
    <a href="#0" class="cd-close">Close</a> 
    <ul class="cd-dropdown-content"> 

     <li class="has-children"><a href="http://codyhouse.co/?p=748">Catalog</a> 
     <ul class="cd-secondary-dropdown is-hidden"> 
      <li class="go-back"><a href="#0">Menu</a></li> 
      <li class="see-all"><a href="https://global-travel-clothing.myshopify.com/pages/shop-travel-jackets-with-lots-of-pockets">All Products</a></li> 
      <li class="has-children"><a href="">Travel Gear</a> 
      <ul class="is-hidden"> 
       <li class="go-back"><a href="#0">Clothing</a></li> 
       <li class="has-children"><a href="#0">Soft Shell</a> 
       <ul class="is-hidden"> 
        <li class="go-back"><a href="#0"></a></li> 
        <li><a href="https://global-travel-clothing.myshopify.com/collections/soft-shell-gen1">Soft Shell Gen1</a></li> 
        <li><a href="https://global-travel-clothing.myshopify.com/collections/soft-shell-joey">Soft Shell Joey</a></li> 
        <li class="see-all"><a href="https://global-travel-clothing.myshopify.com/collections/soft-shell-jackets">All Soft Shell Jackets</a></li> 
       </ul> 
       </li> 
       <li class="has-children"><a href="#0">Sweatshirts</a> 
       <ul class="is-hidden"> 
        <li class="go-back"><a href="#0"></a></li> 
        <li class="see-all"><a href="https://global-travel-clothing.myshopify.com/collections/sweatshirt-travel-jackets">All Sweatshirt Jackets</a></li> 
        <li><a href="https://global-travel-clothing.myshopify.com/collections/sweatshirt-gen1">Sweatshirts Gen1</a></li> 
        <li><a href="https://global-travel-clothing.myshopify.com/collections/sweatshirt-joey">Sweatshirt Joey</a></li> 
       </ul> 
       </li> 
       <li class="has-children"><a href="#0">Polar Fleece</a> 
       <ul class="is-hidden"> 
        <li class="go-back"><a href="#0"></a></li> 
        <li class="see-all"><a href="https://global-travel-clothing.myshopify.com/collections/polar-fleece">All Polar Fleece</a></li> 
        <li><a href="https://global-travel-clothing.myshopify.com/collections/polar-fleece/products/polar-fleece-liner">Polar Fleece Gen1</a></li> 
        <li><a href="https://global-travel-clothing.myshopify.com/collections/polar-fleece/products/joey-polar-fleece-zip-in-liner">Joey Polar Fleece</a></li> 
       </ul> 
       </li> 
       <li><a href="https://global-travel-clothing.myshopify.com/collections/windbreaker-travel-jackets">Windbreakers</a></li> 

       <li><a href="https://global-travel-clothing.myshopify.com/products/sleepmasktravelpillow">Travel Pillow</a></li> 
      </ul> 
      </li> 
     </ul> 
     <!-- .cd-secondary-dropdown --> 
     </li> 
     <li><a href="https://global-travel-clothing.myshopify.com/pages/about-us-who-makes-these-travel-jackets">About Us</a></li> 
     <li><a href="https://global-travel-clothing.myshopify.com/pages/frequently-asked-questions-about-travel-jackets">FAQ</a></li> 
     <li><a href="https://global-travel-clothing.myshopify.com/pages/affiliate-area-global-travel-clothing">Make Money Selling our Jackets</a></li> 
    </ul> 
    <!-- .cd-dropdown-content --> 
    </nav> 

    <!-- .cd-dropdown --> 
</div> 
<script> 
    $(document).ready(function(){ 
    $('#nav-icon2').click(function(){ 
     $(this).toggleClass('open'); 

    }); 
    }); 
    $("document").ready(function() { 

    $('#nav-icon2').on('click', function(e) { 
     if($(this).hasClass('open')) { 
     e.stopPropagation(); 
     } 
    }); 
    }); 
</script> 

Answer 1

あなたは開閉ボタンを持っている場合、あなたは非表示のショーを行う必要があります。ここでは、コードです。トグルではありません。たとえば、 には、スタイルを追加するボタン、またはCSS表示付きのクラスを追加するボタンがあります。

<div style="display:none;">Hidden Stuff</div> 

次に、CSSのプロパティ表示を提供するボタンがあります。

<div style="display:block;">Shown Stuff</div> 

が、より重要なのは、そのはsnippitに含まれていませんが、私はあなたがあなたのindex.htmlの<head>タグでのjQueryを含まない、尋ねるだろうと思って？