javascript - 修复响应式菜单父级切换 - jQuery/Javascript

Question

我正在使用 jQuery/javascript 和 CSS 构建一个完全响应式的可访问菜单。

除了当视口(viewport)小于 535 像素并显示切换菜单时，我的一切工作正常，点击父级不会展开子级，只是直接链接到该页面。

我希望这样当您单击父项时，例如说“工具”，子项就会显示，并且父项和子项都是可单击的链接。

这是一个要查看的暂存站点:website link

这是一个 js 示例:

            var ww = 0;

jQuery(document).ready(function($) {

    $(".menu").show();

    $(".menu .currenthas-child a, .menu .has-child a").each(function() {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    });

    $(".toggleMenu").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");

        if($(this).hasClass("active")){
            //show menu
                $(".menu").removeClass("hidden").fadeIn(250);

        } else {
            //hide menu
                $(".menu").addClass("hidden");
        }

    });

    $(".menu li ul li").click(function(e) {
        if ($(".toggleMenu").hasClass("active")){
            $(".menu").toggleClass("hidden");
        }
    });

    //on click, anywhere on page, close all menu items
    $(document).click( function() {  
        $(".menu li").each(function() {
            if ($(this).hasClass("hover") || $(this).hasClass("keyhover")) {
                $(this).removeClass("hover");
                $(this).removeClass("keyhover");
                //console.log('hover removed');
            }
        });
    });


    //Focus State - Navigation
    $(".menu li").focusin(function (e) {
        if (!$(this).hasClass("keyhover")) {
            $(this).addClass("keyhover");
            showElement($(".menu"));
        } 
        //console.log('menu item focusin');
    });

    //Blur State - Navigation
    $(".menu li").focusout(function (e) {
        if ($(this).hasClass("keyhover")) {
            $(this).removeClass("keyhover");
        } 
        if ($(this).hasClass("hover")) {
            $(this).removeClass("hover");
        } 
        //console.log('menu item focusout');

    });

    //Focus State - Navigation Sub Items
    $(".menu li ul li").focusin(function () {
        if (!$(this).hasClass("glow")) {
            $(this).addClass("glow");
        } 
    });

    //Blur State - Navigation Sub Items
    $(".menu li ul li").focusout(function () {
        if ($(this).hasClass("glow")) {
            $(this).removeClass("glow");
        } 
    });

    //on window resize, recheck size and adjustMenu
    $(window).bind('resize orientationchange', function() {

        ww = viewportSize.getWidth();
        adjustMenu();

        //UN-COMMENT FOR DEBUG OUTPUT
        //var widthTest = document.documentElement.clientWidth;
        //var widthTest2 =  screen.width;
        //console.log("document.documentElement.clientWidth ="+widthTest);
        //console.log("screen.width = "+widthTest2);
        //console.log("viewport().width = "+ww);
        //var mql = window.matchMedia("screen and (max-width: 47.938em)");
        //console.log(mql);
    });

    var hideElement = function(elementToModify) {
        elementToModify.addClass("hidden");
    }

    var showElement = function(elementToModify) {
        elementToModify.removeClass("hidden");
    }

    var adjustMenu = function() {

        if (ww <= 535) {

            $(".toggleMenu").css("display", "inline-block");
            if (!$(".toggleMenu").hasClass("active")) {
                hideElement($(".menu"));
            } else {
                showElement($(".menu"));
            }

            $(".menu li h2.parent").unbind('click').bind('click', function(e) {
                // must be attached to anchor element to prevent bubbling
                e.preventDefault();

                if (e.stopPropagation){
                    e.stopPropagation();
                }
                else if(window.event){
                   window.event.cancelBubble=true;
                }

                //close any sibling menu items
                //$(this).parent().siblings('li').removeClass("hover");
                //$(this).parent().siblings('li').removeClass("keyhover");

                //handle click request
                if (!$(this).parent().hasClass("hover")) {
                    $(this).parent().addClass("hover");
                    //console.log('hover added');
                } else {
                    $(this).parent().removeClass("hover");
                    $(this).parent().removeClass("keyhover");
                    //console.log('hover removed');
                }

            });

        } 
        else if (ww > 535) {

            $(".toggleMenu").css("display", "none");
            $(".toggleMenu").removeClass("active");

            //show menu parents
            showElement($(".menu"));

            //hide any popped up menu sub-items
            $(".menu li").removeClass("hover");

            $(".menu li h2.parent").unbind('click').bind('click', function(e) {
                // must be attached to anchor element to prevent bubbling
                e.preventDefault();

                if (e.stopPropagation){
                    e.stopPropagation();
                }
                else if(window.event){
                   window.event.cancelBubble=true;
                }

                //close any sibling menu items
                $(this).parent().siblings('li').removeClass("hover");
                $(this).parent().siblings('li').removeClass("keyhover");

                //handle click request
                if (!$(this).parent().hasClass("hover")) {
                    $(this).parent().addClass("hover");
                    //console.log('hover added');
                } else {
                    $(this).parent().removeClass("hover");
                    $(this).parent().removeClass("keyhover");
                    //console.log('hover removed');
                }                
            });
        } 
    }

    //initialize the menu
    ww = viewportSize.getWidth();
    adjustMenu();
});

Answer 1

我想你想要的是你的菜单有一个奇怪的行为。如果第二次单击主链接重定向到此页面，如何关闭子菜单？

就是说，你可以像这样做你想做的事:

  $(".menu li").click(function(e) {
    if (!$(this).children('ul').is('.open')) {
      e.preventDefault();
      $(this).children('ul').addClass('open').css({'left' : '0px'});
    }
  });

最好测试子菜单是否可见，但您必须更改 .sub-menu 类的 CSS 为 display:none 左侧:-9999px

更新

您不能对子菜单产生 slideDown 效果，因为它们具有 position : absolute 属性。因此，您需要处理媒体查询以更改它并将其设置为 display : none 属性。通过这种方式，您可以在 click 事件 上使用简单的 slideDown 效果，并在相应的子菜单不可见时阻止该事件。

采取看看这个样本:

$(document).ready(function(){
  $(".dropdown").click(function(e) {
    if (!$(this).children('ul').is(':visible')) {
      e.preventDefault();
      $(this).children('ul').slideDown();
    }
  });
});

*, *:before, *:after {   
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  width: 100%;
}

ul li {
  display: block;
  position: relative;
}

ul li a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  padding: 10px 20px;
  display: block;
  width: 100%;
}

ul > li > a {
  background: #28AADC;
}

ul li a:hover {
  background: #00648C;
}

ul.submenu {
  display: none;
}

ul.submenu > li > a {
  background: #FFBE4F;
}

nav > ul {
  width: 400px;
}

@media screen and (min-width:536px){
  nav > ul > li {
    width: 33.33%;
    float: left;
  }  
  
  nav > ul > li:hover ul.submenu {
    display:block;
  }
  
  ul.submenu {
    position: absolute;
  }
}

@media screen and (max-width:535px){
  nav > ul > li {
    width: 100%;
    float: none;
  }  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
  <ul>
    <li class="dropdown">
      <a href="http://stackoverflow.com">Nav 1</a>
      <ul class="submenu">
        <li><a href="#">Nav 1.1</a></li>
        <li><a href="#">Nav 1.2</a></li>
        <li><a href="#">Nav 1.3</a></li>
        <li><a href="#">Nav 1.4</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="http://stackoverflow.com">Nav 2</a>
      <ul class="submenu">
        <li><a href="#">Nav 2.1</a></li>
        <li><a href="#">Nav 2.2</a></li>
        <li><a href="#">Nav 2.3</a></li>
        <li><a href="#">Nav 2.4</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="http://stackoverflow.com">Nav 3</a>
      <ul class="submenu">
        <li><a href="#">Nav 3.1</a></li>
        <li><a href="#">Nav 3.2</a></li>
        <li><a href="#">Nav 3.3</a></li>
        <li><a href="#">Nav 3.4</a></li>
      </ul>
    </li>
  </ul>
</nav>