HTML中多个DIV层如何隐藏和显示？
比如，进入网页显示 苹果 三星 两个DIV，点击 苹果 在第一个DIV层下只显示苹果4 苹果5 两个div 点击 三星 在第一个DIV层下只显示A5 A7 两个DIV 。 点击 苹果4 在第二个DIV层下显示第三个DIV
请帮忙详细介绍下 最好是带上所有代码，如果解决问题另外再奉送100财富
用JS代码（请修改jQuery引用地址）实现
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="jquery引用地址 自己改写！"></script>
<script>
$(function(){
$('.class').on('click',funciton(){
$(this).nextAll().show();
$(this).parent().siblings().children().not('.brand').hide();
});
});
</script>
</head>
<body>
<div id=apple>
<div class=brand>苹果</div>
<div id=apple4 hidden>苹果4
</div>
<div id=apple5 hidden>苹果5
</div>
</div>
<div id=sumsung>
<div class=brand>三星</div>
<div id=A5 hidden>A5
</div>
<div id=A7 hidden>A7
</div>
</div>
</body>
</html>追问
引用了没反应啊？点击三星或苹果没有显示下面的DIV
追答把我的js代码中的class替换成brand即可，手打快了，抱歉
追问$('.brand').on('click',funciton(){
$(this).nextAll().show();
$(this).parent().siblings().children().not('.brand').hide();
亲 还是没有反应啊
亲，我的目的是这样的：第一排 苹果 点击 在下一排显示 苹果4S ，点击苹果4S在第三排 显示金色
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js" title="jQuery引用地址"></script>
<script>
$(function(){
$('.brand').on('click',function(){
$(this).nextAll().show();
$(this).parent().siblings().children().not('.brand').hide();
});
});
</script>
</head>
<body>
<div id=apple>
<div class=brand>iPhone苹果</div>
<div id=apple4 hidden>iPhone苹果4
</div>
<div id=apple5 hidden>iPhone苹果5
</div>
</div>
<div id=sumsung>
<div class=brand>SUMSUNG三星</div>
<div id=A5 hidden>A5
</div>
<div id=A7 hidden>A7
</div>
</div>
</body>
</html>改好啦！
温馨提示：内容为网友见解，仅供参考
无其他回答
相似回答
