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?-HTML Tutorial-php.cn

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?

WBOY

Release： 2016-06-24 12:07:31

Original

1671 people have browsed it

前端CSS

Sub menu_left heading

Link

Link

Link

Sub menu_left heading

Link

Link

Link

     ...
     ...


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

Copy after login

不知道是不是你要的

可以如下实现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);      });  	}

Copy after login

谢谢5楼大神！！测试成功，四楼测试了下，和原来效果一样哦~！！

努力加油！！以你们为榜样！