與響應菜單和jQuery的slideToggle的問題

我正在構建一個響應式導航菜單，並且我無法通過調用jQuery的slideToggle（）使導航項變爲可見。菜單項（.nav_item）合適地摺疊，然後在視口爲012px時，隱身，第一個菜單項（#nav_menu）「菜單」成爲唯一可見的項目。點擊後，我希望按鈕重新出現並在菜單按鈕下滑動。然而，當我點擊時，沒有任何反應，菜單項保持不可見。如果我從菜單項中取出display: none !important;，它們將成功切換（但始終可見）。有誰知道發生了什麼問題？謝謝。與響應菜單和jQuery的slideToggle的問題

CSS（指南針）：

#navUL { 

    @include background-image(linear-gradient($blue_dark, $blue_light)); 
    text-align: center; 
} 

#navUL li { 

    a:link, a:visited { 
     color: white; 
     text-decoration: none; 
     display: block; 
     height: 40px; 
     padding: 0 25px 0 25px; 
    } 
    a:hover { 
     @include background-image(linear-gradient($red_dark, $red_light)); 
    } 
    display: inline-block; 
    color: white; 
    line-height: 40px; 
    font-family: Helvetica; 
} 

#nav_menu { 
    display: none !important; 
} 

@media only screen and (max-width: 640px) { 

    #nav_menu { 
     display: inline !important; 
    } 

    .nav_item { 
     display: none !important; 
    } 

    #navUL li { 
     display: inline; 
    } 
}

HTML：

<!DOCTYPE HTML> 
<html> 
<head> 
    <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> 
    <!--[if IE]> 
     <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" /> 
    <![endif]--> 
</head> 
<body> 
    <div class="wrapper"> 
     <header> 
      <img src="top_banner.jpg"> 
     </header> 

     <nav> 
      <ul id="navUL"> 
       <li id="nav_menu"><a href="#">Menu</a></li> 
       <li class="nav_item"><a href="#">Home</a></li> 
       <li class="nav_item"><a href="#">Search</a></li> 
       <li class="nav_item"><a href="#">Submit</a></li> 
       <li class="nav_item"><a href="#">News</a></li> 
       <li class="nav_item"><a href="#">Blog</a></li> 
       <li class="nav_item"><a href="#">About</a></li> 
      </ul> 
     </nav> 

     <div id="main"> 

     </div> 
    </div> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 



</body> 
</html>

JS：

<script> 

      $(document).ready(function(){ 
       $('#nav_menu').on('click', function(e){ 
        e.preventDefault(); 
        $('.nav_item').slideToggle('slow'); 
       }); 
      }); 

     </script>

來源

2014-03-13 Tim Aych

它基本上只是一個specificity issue。

即使jQuery的.slideToggle()方法添加內嵌樣式，但它仍然是沒有效果的時候，屏幕尺寸小於640px因爲你使用!important。

@media only screen and (max-width: 640px) 
    .nav_item { 
    display: none !important; 
    } 
}

更具體地說，在媒體查詢上述造型爲重寫的jQuery添加的造型：

<li class="nav_item" style="display: list-item;"><a href="#">Home</a></li>

爲了解決這個問題，刪除的!important所有實例的樣式表，並重新構造造型考慮到具體問題。如果我是你，我會避免使用id這樣的。簡單的類就足夠了，並有助於避免這樣的未來問題。如果沒有改變任何HTML，不過，這會工作：

#navUL #nav_menu { 
    display: none; 
} 

@media only screen and (max-width: 640px) { 
    #navUL #nav_menu { 
     display: inline-block; 
    } 
    #navUL .nav_item { 
     display: none; 
    } 
}

既然你已經使用jQuery，使用resize event刪除jQuery的造型時，屏幕尺寸比640px寬。

$(window).on("resize", function() { 
    if ($(window).width() > 640) { 
     $('.nav_item').css('display',''); 
    } 
}).resize();

這應該照顧一切。看看this working example。

來源

2014-03-16 18:44:45

與響應菜單和jQuery的slideToggle的問題

回答

相關問題