点击它时总是显示子菜单

Question

侧面导航栏有问题。当我点击子菜单链接菜单去隐藏。但是，当我点击子菜单链接时，我想要打开。单击主菜单时会隐藏。

我的代码如下：

＆＃13;

＆＃13;

$(document).ready(function() {
    $('#menu li > a').click(function(e) {
        $(this).addClass("selected");
        if ($(this).next('ul').length > 0) {

            e.preventDefault();

            var subNav = $(this).next('ul');

            if (subNav.is(':visible')) {

                subNav.slideUp('normal')


            } else {
                $('#menu ul:visible').slideUp('normal');

                subNav.slideDown('normal');

                $("a.selected").removeClass("selected");
                $(this).addClass("selected");
            }
        }
    });

    $('.nav-trigger').click(function() {
        $('.side-nav').addClass('visible');
    });
});

＆＃13;

.side-nav.visible {
        display: block;
    }
    
    .side-nav {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #2e3e4e;
        z-index: 99;
        display: none;
        overflow-y: auto;
    }
    
    .side-nav #menu {
        margin: 0;
        padding: 0;
    }
    
    .side-nav #menu ul {
        display: none
    }
    
    .side-nav #menu,
    .side-nav #menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    .side-nav #menu>li {
        background-color: #2e3e4e;
        list-style: none;
        position: relative;
    }
    
    .side-nav #menu>li>a {
        padding: 16px 16px;
        border-bottom: 1px solid #3A4B5C;
        width: 100%;
        display: block;
        text-decoration: none;
        color: #f2f2f2;
        font-size: 1.2em;
    }
    
    .side-nav #menu li a:hover {
        color: #ccc;
        text-decoration: none;
    }
    
    .side-nav #menu li ul li a {
        background-color: #384858;
        color: #fff;
        width: 100%;
        display: block;
        padding: 16px 16px;
        border-bottom: 1px solid #2e3e4e;
        text-decoration: none;
    }
    
    .side-nav #menu li ul li a:hover {
        color: #2addd4;
        text-decoration: none;
        background-color: #2e3e4e;
    }
    
    .side-nav #menu li ul li a::before {
        display: inline-block;
        cursor: pointer;
        width: 10px;
        height: 10px;
        content: "\f0da";
        font-family: FontAwesome;
        left: 0px;
        position: relative;
        top: 0;
        background-color: transparent;
    }
    
    .side-nav #menu li ul li a:hover::before {
        display: inline-block;
        cursor: pointer;
        width: 10px;
        height: 10px;
        content: "\f0da";
        font-family: FontAwesome;
        left: 0px;
        position: relative;
        top: 0;
        background-color: transparent;
    }
    
    .selected {
        z-index: 9999;
        border-left: 2px;
    }
    
    .side-nav ul li a:hover:after {
        content: '';
        position: absolute;
        width: 4px;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #2addd4;
    }
    
    .side-nav ul li a.selected:after {
        content: '';
        position: absolute;
        width: 4px;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #2addd4;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="side-nav">
	<nav>
            <ul id="menu">
                <li>
                    <a href="#"> <span><i class="fa fa-dashboard"></i></span> <span>Dashboard</span> </a>
                    <ul>
                        <li><a href="page1.html">page1</a></li> 
                    </ul>
                </li>
		<li>
                    <a href="#"> <span><i class="fa fa-user"></i></span> <span>User Page</span> </a> 
                </li>
                <li>
                    <a href="#"> <span><i class="fa fa-user"></i></span> <span>Admin Page</span> </a>
                    <ul>
                        <li><a href="adminpage1.html">adminpage 1</a></li>
                        <li><a href="adminpage2.html">adminpage 2</a></li>
                    </ul>
                </li> 
		</ul>
	</nav>
</div>

＆＃13;

＆＃13;

＆＃13;