響應式導航欄在打開時關閉

因此，我很早以前就創建了一個站點，現在想要在其中添加一個響應式菜單。問題在於，當我點擊菜單欄時，它會打開，但在顯示整個列表後立即關閉。響應式導航欄在打開時關閉

菜單HTML：

<!-- start menu --> 
<div id="menu" class="fix-fish-menu"> 
    <ul id="nav" class="sf-menu"> 
     <li><a href="home.php">Home</a></li> 
     <li><a href="contact_list.php">Contacts</a></li> 
     <li><a href="showrooms_list.php">Showrooms</a></li> 
     <li><a href="services_list.php">Services</a></li> 
     <li><a href="bookmarks.php">Bookmarks</a></li> 
     <li><a href="gallery.php">Fashion 101</a></li> 
     <li><a href="logout.php">Logout</a></li> 
    </ul> <!-- end #nav --> 
    <div class="menu-trigger"> 
     MODASearch <span>The Fashion Directory</span> <i class="fa fa-bars "></i> 
    </div> 
</div> <!-- end #menu -->

CSS：

.menu-trigger{ 
    background-color: #39414c; 
    height: 40px; 
    width: 100%; 
    display:none; 
    color:#fff; 
    padding:10px; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
    clear:both; 
    font-size:18px; 
    font-family: 'PT Sans Narrow', sans-serif; 
} 
.menu-trigger span{ 
    font-size:12px; 
} 
.menu-trigger i{ 
    font-size:18px; 
    float:right; 
}

responsive.css：

@media only screen and (max-width : 768px) { 
    .menu-trigger{display:block;} 
    #nav {display:none; } 
    .nav-expanded{display:block;} 
}

聯JS：

jQuery(document).ready(function() { 
    jQuery(".menu-trigger").click(function() { 
     jQuery("#nav").slideToggle(400, function() { 
      jQuery(this).toggleClass("nav-expanded").css('overflow',''); 
     }); 

    }); 
});

來源

2014-11-04 Imran khattak

其工作正常。在這裏檢查http://jsfiddle.net/3ckc2etz/1/ – 2014-11-04 05:07:24

@VinitaRathore謝謝 – 2014-11-04 15:26:04

解決了它，實際上有一些幫助，但問題是一個類無法以這種方式重寫一個ID規則，因此只要jQuery動畫完成，內容就會重置爲不顯示任何內容。

所以在這種情況下，我添加了另一個類到#nav元素並設置隱藏它的顯示而不是隱藏id。現在工作正常。對不起，從未使用過jsfiddle，否則我會在那裏發佈答案。特別感謝Brad Schiff指出我正確的方向。

這裏是代碼現在的樣子：

<div id="menu" class="fix-fish-menu"> 
    <ul id="nav" class="sf-menu my-menu"> 
     <li><a href="home.php">Home</a></li> 
     <li><a href="contact_list.php">Contacts</a></li> 
     <li><a href="showrooms_list.php">Showrooms</a></li> 
     <li><a href="services_list.php">Services</a></li> 
     <li><a href="bookmarks.php">Bookmarks</a></li> 
     <li><a href="gallery.php">Fashion 101</a></li> 
     <li><a href="logout.php">Logout</a></li> 
    </ul> <!-- end #nav --> 
    <div class="menu-trigger">MODASearch <span>The Fashion Directory</span> <i class="fa fa-bars "></i></div> 
</div> <!-- end #menu --> 
<div class="clear"></div>

響應CSS：

.menu-trigger{display:block;} 
.my-menu {display:none; } 
.nav-expanded{display:block;}

JS：

jQuery(document).ready(function() { 

    jQuery(".menu-trigger").click(function() { 

     jQuery(".my-menu").slideToggle(400, function() { 
      jQuery(this).toggleClass("nav-expanded").css('display',''); 
     }); 

    }); 

});

遵循下面的教程鏈接，如果有人有興趣tutorial

來源

2014-11-04 15:24:16

響應式導航欄在打開時關閉

回答

相關問題