我有一个下拉菜单,但点击后我可以让li
保持可见状态。
当我点击菜单外部或li
时,我想要隐藏ul
:
我尝试使用return false;
和event.stopPropagation();
,但我无法让它工作 - 我希望有人知道如何解决这个问题 - 我认为它应该相当简单。
这是我的代码:
<link rel="stylesheet" href="css/4style.css" type="text/css" media="screen">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<ul id="nav">
<li >
<a href="#">Topic 1</a>
<ul class="show">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</li>
<li >
<a href="#">Topic 2</a>
<ul class="show">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$('#nav li a').click(function () { // binding onclick
if ($(this).hasClass('select_ul')) {
$("#nav li ul").slideUp(100); // hiding submenu
$("#nav .select_ul").removeClass("select_ul");
} else {
$("#nav li ul").slideUp(100); // hiding submenu
$("#nav .select_ul").removeClass("select_ul");
if ($(this).next(".show").length) {
$(this).addClass("select_ul"); // display popup
$(this).next(".show").slideDown(200);
}
}
});
$('#nav li ul li a').click(function() {
$("#nav li ul li a.select_li").removeClass("select_li");
$(this).addClass('select_li');
});
// SKJUL NAV VED KLIK UDENFOR
$('html').click(function() {
$("#nav").hide(100);
});
$('#nav').click(function(event){
event.stopPropagation();
});
}); //END OF DOCUMENT READY
</script>
答案 0 :(得分:0)
试试这个,
$(document).ready(function () {
$('ul#nav > li > a').click(function () { // onclick for parent anchor tags
$("#nav li ul").hide(); // hiding submenu
$("#nav .select_ul").removeClass("select_ul");
if ($(this).next(".show").length) {
$(this).addClass("select_ul"); // display popup
$(this).next(".show").slideDown(200);
}
});
$('#nav li ul li a').click(function (e) {
e.preventDefault();
});
// SKJUL NAV VED KLIK UDENFOR
$('html').click(function () {
$("#nav").hide(100);
});
});
已更新,是的,因为 $('html')。点击()评论或删除此event
将解决此问题,如
$('html').click(function () {
// $("#nav").hide(100);
});
答案 1 :(得分:0)
我决定稍微删除一些内容,因为你想要slideDown()
和slideUp()
,我选择检查可见性,但是否则我会使用jQuery的toggle()
。< / p>
$('#nav li').on('click', function( e ) {
e.stopPropagation();
/**
* $Menu
* - get the child list of the
* currently clicked Menu.
*
* $thisMenu
* - Transvrse up the tree to find
* the User's Click, of <li>
* or <a> parent list container.
*
* $activeMenus
* - Get Menus other than the current
* list clicked.
**/
var $Menu = $(this).children('ul.show'),
$thisMenu = $(e.target).closest('.show'),
$activeMenus = $('#nav li').not(this).find('ul.show');
/**
* Only If the Clicked menu isn't visible
**/
if ( !$Menu.is(':visible') ) {
/**
* If this menu here, doesn't the Class 'Active'
* Slide up other Active menus.
**/
if ( !$thisMenu.hasClass('active') )
$activeMenus.slideUp().removeClass('active');
/**
* Give this menu a new Class of Active
* Adding Purple background && Slide it down.
**/
$Menu.slideDown().addClass('active');
}
});
确实你使用event.stopPropagation()
是正确的;在click
事件发生后立即调用。
答案 2 :(得分:0)
请考虑以下示例:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<ul id="nav">
<li class="nav2"><a href="#">Approved</a>
<ul>
<li class="pft-file ext-approved"><a href="javascript:alert('ok');">051254-251</a></li>
<li class="pft-file ext-approved"><a href="javascript:alert('ok');">051254-252</a></li>
<li class="pft-file ext-approved"><a href="javascript:alert('ok');">051254-253</a></li>
<li class="pft-file ext-approved"><a href="javascript:alert('ok');">051254-254</a></li>
<li class="pft-file ext-approved"><a href="javascript:alert('ok');">051254-255</a></li>
</ul>
</li>
<script type="text/javascript">
$(document).ready( function() {
// Hide all subfolders at startup
$("#nav").find("UL").hide();
// Expand/collapse on click
$(".nav2 A").click( function() {
$(this).parent().find("UL:first").slideToggle("medium");
if( $(this).parent().attr('className') == "nav2" ) return false;
});
});
</script>