Heim > Artikel > Web-Frontend > 一个伸缩菜单，点击A栏目展开，只能点击B栏目A才伸缩隐藏，如何再次点击A就可以隐藏A_html/css_WEB-ITnose
一个伸缩菜单，点击A栏目展开，只能点击B栏目A才伸缩隐藏，如何再次点击A就可以隐藏A_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:07:311623Durchsuche
前端CSS
/*******************************menu.js****************************/
function initmenu_left() {
$('#menu_left ul').hide();
$('#menu_left ul:first').hide();
$('#menu_left li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu_left ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initmenu_left();});
还有一个JS没放上来，我估摸着就在上面这个改，谢谢各位了！
回复讨论(解决方案)
你这效果不是挺好的嘛 两个相互切换隐藏显示
你这效果不是挺好的嘛 两个相互切换隐藏显示
关键是客户想要点A显示，再点A隐藏！！！！
<html><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head><script type="text/javascript"> </script><body> <ul id="menu_left"> <li><a href="#" class="a">a menu_left heading</a> <ul> <li><a href="http://site.com/">Link</a></li> <li><a href="http://site.com/">Link</a></li> <li><a href="http://site.com/">Link</a></li> </ul> </li> <li><a href="#" class="b">b menu_left heading</a> <ul> <li><a href="http://site.com/">Link</a></li> <li><a href="http://site.com/">Link</a></li> <li><a href="http://site.com/">Link</a></li> </ul> </li> </ul> <script type="text/javascript"> var n = 0; function initmenu_left() { $('#menu_left ul').hide(); $('#menu_left ul:first').hide(); $('#menu_left li a').click( function() { var checkElement = $(this).next(); if((checkElement.is('ul')) && (checkElement.is(':visible'))) { return false; } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { if($(this).attr("class") == 'a'){ if(n >= 1){ $(this).parent().hide(); }else{ $('#menu_left ul:visible').slideUp('normal'); checkElement.slideDown('normal'); n++; return false; } }else{ $('#menu_left ul:visible').slideUp('normal'); checkElement.slideDown('normal'); return false; } } } ); } $(document).ready(function() {initmenu_left();}); </script></body></html> 不知道是不是你要的
可以如下实现toggle方法的使用
function initmenu_left() { $('#menu_left ul').hide(); $('#menu_left ul:first').hide(); $('#menu_left li a').click(function() { $(this).parent().find('ul').toggle(200); }); } 谢谢5楼大神！！测试成功，四楼测试了下，和原来效果一样哦~！！
努力加油！！以你们为榜样！
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：求教一下web如何显示页面的问题_html/css_WEB-ITnoseNächster Artikel：HTML5做的一个小动画有个奇葩的问题._html/css_WEB-ITnose