響應式導航菜單：切換不起作用

我正在使用簡單的導航菜單。我想讓這個響應。當我重新調整窗口小於480像素，然後媒體查詢的作品，但菜單觸發器不翻轉。在移動視圖上，我只想顯示導航菜單，但不顯示選項。當有人點擊它時，它應該切換。我的代碼在CodePen：http://codepen.io/parakhharsh/pen/NqRxdE？響應式導航菜單：切換不起作用

HTML代碼：

<html> 
<head> 
    <title>OpenMoz</title> 
    <meta charset="utf-8"> 
    <meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" type="text/css" href=""/> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    </head> 
    <body>  
    <span class="menu-trigger">Menu</span>  
    <nav class="navbar navbar-default"> 
    <!-- <div class="nav-menu"> --> 
      <ul class="nav navbar-nav"> 
      <li style="margin-left:15px;"><a href="home.php" class="ui-btn-active" data-icon="home">Home</a></li> 
      <li style="margin-left:15px;"><a href="about.php" data-icon="home">About</a></li> 
      <li style="margin-left:15px;"><a href="contact.php" data-icon="home">Contact</a></li> 
      </ul> 
     <!-- </div> --> 
    </nav> 
</body> 
</html>

CSS代碼：

.menu-trigger 
{ 
    display: none; 
} 

@media screen and (max-width: 480px) 
{ 
    .menu-trigger 
    { 
     display: block; 
     color: #305782; 
     background-color: #d5dce4; 
     padding:10px; 
     text-align: left; 
     font-size: 83%; 
     cursor: pointer; 
    } 
    nav.nav-expanded 
    { 
     display: block; 
    } 
    nav.navbar navbar-default 
    { 
     display: none; 
    } 
    nav.navbar navbar-default ul li 
    { 
     float: none; 
     border-bottom: 2px solid #d5dce4; 
    } 
    nav.navbar navbar-default ul li:last-child 
    { 
     border-bottom:none; 
    } 
}

JavaScript代碼：

jQuery(document).ready(function() { 
     jQuery(".menu-trigger").click(function() { 
     jQuery(".navbar navbar-default").slideToggle(); 
     }); 
});

非常感謝你對你有所幫助。

來源

2015-05-20 Harshal

您錯過了您的JS期間.navbar和.navbar-default之間的JS。

jQuery(document).ready(function() { 
    jQuery(".menu-trigger").click(function() { 
    jQuery(".navbar.navbar-default").slideToggle(); 
    }); 
});

來源

2015-05-20 17:30:08

謝謝先生。你的建議對我有用。 – Harshal

只是改變你的nav.navbar navbar-default到nav.navbar.navbar-default無處不在......因爲它是分配給一個導航元素的多個類的情況。

來源

2015-05-20 17:38:11 dsaket

響應式導航菜單：切換不起作用

回答

相關問題