FreeStyle09 FreeStyle09 -4 years ago 80
Javascript Question

jQuery - slideDown menu

I am creating a slideDown menu, i have navigation in html and ul with 4 elements. When im clicking image of menu it slied down but after that shows error in console

Cannot read property 'display' of undefined


Here's the code:

function menu() {
var ul = $(".ul_menu");
$(".slide_down_menu").on("click", function() {
ul.slideDown(400);
});

$(document).on("click", function() {
if (ul.css('display') == 'block') {
ul.slideUp(400);
}
});

}


HTML

<nav class="mobile">
<button type="button" class="slide_down_menu"><img src="gallery/menu.png"></button>
<ul class="ul_menu">
<li>
<a href="#main_page" title="">O nas</a>
</li>
<li>
<a href="#location" title="">Lokalizacja</a>
</li>
<li>
<a href="#gallery" title="">Galeria</a>
</li>
<li>
<a href="#contact" title="">Kontakt</a>
</li>
</ul>
</nav>

Answer Source

You can hide the dropdown using below code and use e.stopPropogation() to prevent clicks within the dropdown.

$(function() {
  var ul = $(".ul_menu");

  $(document).click(function() {
    ul.slideUp(400);
  });

  $(".slide_down_menu").on("click", function(e) {
    e.stopPropagation();
    ul.slideToggle(400);
  });

});
.ul_menu {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav class="mobile">
  <button type="button" class="slide_down_menu"><img src="gallery/menu.png"></button>
  <ul class="ul_menu">
    <li>
      <a href="#main_page" title="">O nas</a>
    </li>
    <li>
      <a href="#location" title="">Lokalizacja</a>
    </li>
    <li>
      <a href="#gallery" title="">Galeria</a>
    </li>
    <li>
      <a href="#contact" title="">Kontakt</a>
    </li>
  </ul>
</nav>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download