修復響應菜單父切換 - jQuery/Javasicript

Question

我正在構建一個完全響應式訪問菜單使用jQuery/JavaScript和CSS。

我已經得到了一切正常工作，除了當視口小於535px和切換菜單顯示，父母點擊不擴大孩子，只是直接鏈接到該頁面。

我喜歡它，所以當你點擊父母時，例如說「工具」，孩子顯示，並且父項和孩子都是可點擊的鏈接。

這裏是一個臨時網站看看：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'}); 
    } 
    }); 

這是更好地測試，如果子菜單是可見或不可見，但你必須在適當的位置display:none更改.sub-menu類的CSS的left: -9999px

UPDATE

你不能讓你的子菜單一了slideDown效果，因爲他們有一個position : absolute屬性。所以你需要處理媒體查詢來改變它，並將其設置爲display : none屬性。通過這種方式，您可以在click event上使用簡單的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>