ホームページ  >  記事  >  ウェブフロントエンド  >  格納可能なメニュー。列 A をクリックして展開します。列 A をクリックすると、列 B のみを格納して非表示にできます。A をもう一度クリックして、A_html/css_WEB-ITnose を非表示にするにはどうすればよいですか?

格納可能なメニュー。列 A をクリックして展開します。列 A をクリックすると、列 B のみを格納して非表示にできます。A をもう一度クリックして、A_html/css_WEB-ITnose を非表示にするにはどうすればよいですか?

WBOY
WBOYオリジナル
2016-06-24 12:07:311623ブラウズ

フロントエンド CSS


42d73ae25bc699e65a6e27a9950a9bab
25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32サブメニュー_左見出し5db79b134e9f6b82c0b36e0489ee08ed
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c651d931027ef1dd1d5378be4c2ee9b048リンク5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c651d931027ef1dd1d5378be4c2ee9b048リンク5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c651d931027ef1dd1d5378be4c2ee9b048リンク5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
...
...
929d1f5ca49e04fdcb27f9465b944689
25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32サブメニュー_左見出し5db79b134e9f6b82c0b36e0489ee08ed
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c651d931027ef1dd1d5378be4c2ee9b048リンク5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c651d931027ef1dd1d5378be4c2ee9b048リンク5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c651d931027ef1dd1d5378be4c2ee9b048リンク5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
...
...
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:見える').slideUp('normal');
checkElement.slideDown('normal')


);
}
$(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>

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

努力加油!!以你们支持样!

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。