Dropdown menu not showing in bootstrap after slideToggle

Question

Dropdown menu in Bootstrap doesn't appear after slideToggle.

First time this was showing in large screen (full size) when i resize browser into small view(mobile screen) then dropdown menu showing into slidetoggle and proper working, after that i again resize screen in large screen then it was hide. and when i refresh the page then it is showing. can anyone have idea about it.

<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

I think I have done what you are looking for. This may help you. Here's a 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> 

Answer 2

You can try 'navbar-collapse'

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