jQuery - slideDown菜单

Question

我正在创建一个slideDown菜单，我在html和ul中导航有4个元素。当我点击菜单的图像时，它会向下滑动，但之后在控制台中显示错误

Cannot read property 'display' of undefined 

以下是代码：

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 1

Are you sure call `menu()` function? Its seem not problem in your code.

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

    $(document).on("click", function(e) { 
    if(!($(e.target).hasClass(".slide_down_menu")||($(e.target).closest(".slide_down_menu").length))){
        if (ul.css('display') == 'block') {
            $(ul).slideUp(400);
        }}
    });
}

$(document).ready(function(){
  menu();
});

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

Answer 2

您可以使用以下代码隐藏下拉列表，并使用e.stopPropogation()来阻止下拉列表中的点击次数。

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