Question

在slideToggle之后，Bootstrap中的下拉菜单不会出现。

第一次在大屏幕上显示（全尺寸）当我将浏览器调整为小视图（移动屏幕），然后下拉菜单显示为slidetoggle和正常工作，之后，我再次在大屏幕上调整屏幕大小然后隐藏了。当我刷新页面然后它显示。任何人都可以了解它。

<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>

Answer 1

我想我已经做了你想要的。这可能对你有所帮助。这是一个小提琴：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>

Answer 2

您可以尝试使用navbar-collapse＆＃39;

<span class="menu-icon navbar-toggle" data-toggle="collapse" data-target=".nav1">
<ul class="nav1 navbar-collapse collapse">

slideToggle后，下拉菜单未在bootstrap中显示

2 个答案: