jQuery - slideDown菜单

Question

我正在创建一个slideDown菜单，我有导航的html和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>