Home > Article > Web Front-end > A retractable menu. Click column A to expand it. Only column B can be retracted and hidden by clicking column A. How to hide A_html/css_WEB-ITnose by clicking A again?
A retractable menu. Click column A to expand it. Only column B can be retracted and hidden by clicking column A. How to hide A_html/css_WEB-ITnose by clicking A again?
- WBOYOriginal
- 2016-06-24 12:07:311623browse
前端CSS
9601be3b9aa299f2fd9fd3775ed87212
25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79Sub menu_left heading5db79b134e9f6b82c0b36e0489ee08ed
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6f226a541c2e921a946a6508d0b9cec38Link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f226a541c2e921a946a6508d0b9cec38Link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f226a541c2e921a946a6508d0b9cec38Link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
...
...
929d1f5ca49e04fdcb27f9465b944689
25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79Sub menu_left heading5db79b134e9f6b82c0b36e0489ee08ed
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6f226a541c2e921a946a6508d0b9cec38Link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f226a541c2e921a946a6508d0b9cec38Link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f226a541c2e921a946a6508d0b9cec38Link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
...
...
929d1f5ca49e04fdcb27f9465b944689
...
...
929d1f5ca49e04fdcb27f9465b944689
/*******************************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楼大神！！测试成功，四楼测试了下，和原来效果一样哦~！！
努力加油！！以你们为榜样！