Question

我有这个2级导航。如果我点击第二级它不应该隐藏，但坚持在那里。在悬停时，第二级显示正常，现在我想要的是，我点击sub 2并移出光标，应该选择sub 2并保持在那里。

＆＃13;

$(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"});
    	}
    );
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

试试这个：

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

Answer 2

＆＃13;

 $(document).ready(function () {
    	var $nav = $('#top_navigation > ul > li');
   	    var $nav1 = $('#top_navigation > ul > li >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"});
    		}
    	);
   $nav1.click(function(){
     $(this).addClass("selected_menu_item");
     }
   );
    });

＆＃13;

#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;
    }

＆＃13;

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

＆＃13;

我在您的代码中添加了点击事件。这是最常见的

坚持第二级导航onclick

2 个答案: