javascript - 保持二级导航onclick

我有这个2级导航。如果我单击第二层，它不应隐藏，而应粘贴在那里。悬停时，第二层显示正确，现在我想要的是，单击子2并将光标移出，应该选择子2并停留在那。

$(document).ready(function () {
    var $nav = $('#top_navigation > ul > li');
    $nav.hover(
        function() {
    	    $('ul', this).stop(true, true).slideDown('fast');
            $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
    	},
    	function() {
            $('ul', this).slideUp('fast');
            $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
    	}
    );
});

#top_navigation {
    width: 1248px;
    margin: 0 auto;
    position: relative;
    text-transform: uppercase;
    font-family: "Rounded Font", sans-serif;
    font-size: 13px;
}
#top_navigation ul ul {
    display: none;
}
#top_navigation ul {
    padding-left: 0;
}
#top_navigation ul li {
    margin: 0;
    padding: 0;
    float: left;
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    list-style: none;
}
#top_navigation ul li a {
  	display: block;
    text-align: center;
    text-decoration: none;
    color: #000;
    background-color: #FFF;
}
#top_navigation ul li.selected_menu_item a {
    background-color: #ccc;
    color: #FFF;
}
#top_navigation ul li a:hover {
    background-color: #ccc;
    color: #FFF;
}
#top_navigation li li {
    height: 30px;
    line-height: 30px;
    border-top: #ccc 1px solid;
}

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    </head>
    <body bgcolor="black">
        <div id="top_navigation">
    		<ul>
    			<li><a href="#">item1</a></li>
    			<li><a href="#">item2</a>
    				<ul class="submenu">
    					<li><a href="#">sub1</a></li>
    					<li><a href="#">sub2</a></li>
    					<li class="selected_menu_item"><a href="#">sub3</a></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    </body>
</html>

最佳答案

试试这个:

    $(document).ready(function () {
    var $nav = $('#top_navigation > ul > li');
    $nav.hover(
        function() {
            $('ul', this).stop(true, true).slideDown('fast');

            $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
        },
        function() {
           if( ! $('ul', this).children().hasClass('show')) {
               $('ul', this).slideUp('fast');
           } else {
              $('#top_navigation ul').click(function(){
                $('ul.submenu').slideUp();
              })
           }
           $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
        }
    );

    $('ul.submenu li').click(function(){
      $('ul.submenu li').removeClass('selected_menu_item')
        $(this).addClass('selected_menu_item show')
    });


});

工作小提琴:https://jsfiddle.net/co7u8L23/2/

关于javascript - 保持二级导航onclick，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34670718/