Home >Web Front-end >HTML Tutorial >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?

WBOY
WBOYOriginal
2016-06-24 12:07:311668browse

前端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楼大神!!测试成功,四楼测试了下,和原来效果一样哦~!!

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn