Question

js 点击一个按钮 显示一个div 隐藏之前的div，每次点击显示一个

如何才能点击一个按钮，之前的不显示，只显示当前 var oDiv = document.getElementsByClassName('operate_main_center_right_top_font1_imgs1'); var div = document.getElementsByClassName('operate_main_center_right_top_font1_js'); console.log(oDiv) console.log(div) for (var i = 0; i < oDiv.length; i++) { (function(i) { oDiv[i].onclick = function() { console.log(div[i]); var val = div[i].style.display; div[i].style.display = "block"; if(val == 'none') { div[i].style.display = "block"; }else { div[i].style.display = "none"; } } })(i) }
for (var i = 0; i < oDiv.length; i++) {
(function(i) {
oDiv[i].onclick = function() {
var val = div[i].style.display;
div[i].style.display = "block";

if(val == 'none')
{
div[i].style.display = "block";
}else
{
div[i].style.display = "none";
}
}
})(i)
}

Answer 1

直接点击之后，多添加一个显示样式属性，点击下一个，判断对象元素里面有没有这个样式属性，没有就直接添加，有就删掉，再重新添加到新的子元素里面去

Answer 2

我随便写的一个demo，您看一下，不知道是不是你想要的效果
html：
<ul>
<li>1
<ul>
<li>微信1</li>
<li>微博1</li>
<li>QQ1</li>
</ul>
</li>
<li>2
<ul>
<li>微信2</li>
<li>微博2</li>
<li>QQ2</li>
</ul>
</li>
<li>3
<ul>
<li>微信3</li>
<li>微博3</li>
<li>QQ3</li>
</ul>
</li>
</ul>
css：
li{
list-style:none;
}
li ul{
display: none;
}
.showBox{
display: block;
}
jq：
$("li").click(function(){
$(this).find("ul").addClass("showBox");
$(this).siblings().find("ul").removeClass("showBox");
})

追问

你好，我使用了.addClass("showBox")这样的方法是不行的，但是我用show是可以的显示出来，但是我还是无法达到点击下一个上一个消失的效果

追答

不知道你写的代码时哪里的问题，或者你贴一下你用.addClass("showBox")写的代码，我的代码把addClass和removeClass换成show和hide也是可以的