Javascript 滑动切换后引导中不显示下拉菜单

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

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

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

$（“span.菜单图标”）。单击（函数（）{
$（“ul.nav1”）。滑动切换（300，函数（）{
//动画完成。
});
});

我想我已经完成了你想要的。这可能对你有帮助。这是一把小提琴：

$（“span.菜单图标”）。单击（函数（）{
如果（$（窗口）.width（）767）{
if（$（（“ul.nav1”）.hasClass（'open'））{
$（“ul.nav1”）.removeClass（'open'）；
$（“ul.nav1”）.css（“显示”、“无”）；
}否则{
$（“ul.nav1”）.css（“显示”、“块”）；
}
}否则{
如果（$（'ul.nav1'）。是（':visible'））{
$（“ul.nav1”）.css（“显示”、“无”）；
}
}
});
.nav1{
显示：块；
}
@媒体屏幕和屏幕（最大宽度：767px）{
.导航1{
显示：无；
}
}

菜单图标












您可以尝试“导航栏折叠”

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