javascript - slideToggle 后下拉菜单未显示在 Bootstrap 中

Question

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

这是第一次在大屏幕上显示(全尺寸) 当我将浏览器调整为小 View (移动屏幕)然后下拉菜单显示为滑动切换和正常工作时， 之后我再次在大屏幕上调整屏幕大小然后它被隐藏了。 当我刷新页面时，它就会显示出来。 任何人都可以知道它。

<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

我想我已经完成了您想要的。这可能对你有帮助。这是一个 fiddle :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>