滑动切换后，引导程序中未显示下拉菜单

Dropdown menu not showing in bootstrap after slideToggle

本文关键字：显示 下拉菜单 引导程序      更新时间：2023-09-26

滑动切换后，Bootstrap中的下拉菜单不会出现。

这是第一次在大屏幕上显示（全尺寸）当我将浏览器调整为小视图（移动屏幕），然后下拉菜单显示为滑动切换和正确工作时，之后，我再次在大屏幕中调整屏幕大小，然后它被隐藏了。当我刷新页面时，它就会显示出来。有人知道吗？

<div class="top-nav cl-effect-5">
<span class="menu-icon"><img src="images/menu-icon.png" alt=""/></span> 
        <ul class="nav1">
        <li><a href="index.html" class="active"><span data-hover="Home">Home</span></a></li>
        <li><a href="about.html"> <span data-hover="About">About</span></a></li>
        <li><a href="services.html"> <span data-hover="Services">Services</span></a></li>
        <li><a href="news.html"> <span data-hover="News">News</span></a></li>
        <li><a href="contact.html"> <span data-hover="Contact">Contact</span></a></li>
        </ul>
<!-- script-for-menu -->
    <script>
    $("span.menu-icon").click(function () {
    $("ul.nav1").slideToggle(300, function () {
    // Animation complete.
     });
     });
    </script>
    <!-- /script-for-menu -->
    </div>

我想我已经完成了你想要的。这可能会对你有所帮助。这是一把小提琴：https://jsfiddle.net/Lghuempp

 $("span.menu-icon").click(function () {
     if ($(window).width() <= 767) {
         $("ul.nav1").slideToggle();
         $("ul.nav1").addClass('open');
     } else {
         $("ul.nav1").removeClass('open');
     }
 });
 $(window).resize(function () {
     if ($(window).width() > 767) {
         if ($("ul.nav1").hasClass('open')) {
             $("ul.nav1").removeClass('open');
             $("ul.nav1").css("display", "none");
         } else {
             $("ul.nav1").css("display", "block");
         }
     } else{
         if ($('ul.nav1').is(':visible')) {
     		$("ul.nav1").css("display", "none");
         }
     }
 });
.nav1 {
    display:block;
}
@media screen and (max-width:767px) {
    .nav1 {
        display:none;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="top-nav cl-effect-5">
<span class="menu-icon">Menu icon</span> 
    <ul class="nav1">
        <li><a href="index.html" class="active"><span data-hover="Home">Home</span></a>
        </li>
        <li><a href="about.html"> <span data-hover="About">About</span></a>
        </li>
        <li><a href="services.html"> <span data-hover="Services">Services</span></a>
        </li>
        <li><a href="news.html"> <span data-hover="News">News</span></a>
        </li>
        <li><a href="contact.html"> <span data-hover="Contact">Contact</span></a>
        </li>
    </ul>
</div>

您可以尝试"导航栏折叠"

<span class="menu-icon navbar-toggle" data-toggle="collapse" data-target=".nav1">
<ul class="nav1 navbar-collapse collapse">
相关文章：