Javascript 下拉按钮在每次单击下拉列表中的任意位置时关闭_Javascript_Jquery_Html_Drop Down Menu_Shopify

Javascript 下拉按钮在每次单击下拉列表中的任意位置时关闭

javascript jquery html drop-down-menu shopify

Javascript 下拉按钮在每次单击下拉列表中的任意位置时关闭,javascript,jquery,html,drop-down-menu,shopify,Javascript,Jquery,Html,Drop Down Menu,Shopify,我做了一个下拉列表，我从互联网上的模板。这是我遇到的麻烦。问题是，每次我点击下拉列表上的每个链接时，下拉列表都会关闭。代码如下： jQuery(document).ready(function($){ //open/close mega-navigation $('.cd-dropdown-trigger').on('click', function(event){ event.preventDefault(); toggleNav();

我做了一个下拉列表，我从互联网上的模板。这是我遇到的麻烦。问题是，每次我点击下拉列表上的每个链接时，下拉列表都会关闭。代码如下：

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>


标题










































$（文档）.ready（函数（）{
$（'#nav-icon2'）。单击（函数（）{
$（this.toggleClass（'open'）；
});
});
$（“文档”）.ready（函数（）{
$（'nav-icon2'）。在（'click'，函数（e）{
if（$（this）.hasClass（'open'））{
e、 停止传播（）；
}
});
});

如果你有一个打开和关闭按钮，你应该做一个隐藏显示。不是开关。例如，有一个按钮可以添加样式或添加带有CSS显示的类：无

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

隐藏的东西

然后有一个按钮，让它的CSS属性显示：块

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

显示内容

但更重要的是，它没有包含在snippit中，但我想我会问，您是否将jQuery包含在index.html的

标记中？

我将尝试根据您的建议使其工作。是的，我包括了jQuery。