我希望单击一个按钮时显示一个div。
现在，我只能显示要单击的按钮内的内容，如下所示：
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassname("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click",function() {
var current = document.getElementsByClassname("active");
if (current.length > 0) {
current[0].classname = current[0].classname.replace(" active","");
}
this.classname += " active";
});
}.mainmenu {
display: block;
width: 100% !important;
background: red;
height: auto;
}
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
height: auto;
widht: 100%;
}
/* Style the active class,and buttons on mouse-over */
.active,.btn:hover {
background-color: #666;
color: #fff;
}
.submenu > p {
display: none;
background: green;
}
.active p {
display: block;
}<div id="myDIV">
<div class="mainmenu">
<button class="btn">1
<div class="submenu">
<p> TEST1</p>
</div>
</button>
</div>
<div class="mainmenu">
<button class="btn">2 <div class="submenu">
<p> TEST2</p>
</div></button>
</div>
<div class="mainmenu">
<button class="btn">3 <div class="submenu">
<p> TEST3</p>
</div></button>
</div>
<div class="mainmenu">
<button class="btn">4 <div class="submenu">
<p> TEST4</p>
</div></button>
</div>
<div class="mainmenu">
<button class="btn">5 <div class="submenu">
<p> TEST5</p>
</div></button> </div>
</div>
如果我将要显示的div从按钮中移出，我知道我必须调整JavaScript代码以仍然显示div（现在不在按钮中）。不幸的是我不知道如何。
所以我基本上是想在单击按钮时显示div（在第一个jsfiddle中工作），但是现在我想将div从按钮中移出。 （我在第二个jsfiddle中尝试过） 当我将div移出按钮时，代码不起作用。我确定我的JavaScript出现了问题，但我不知道该如何解决。
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassname("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click",.btn:hover {
background-color: #666;
color: #fff;
}
.submenu > p {
display: none;
background: green;
}
.active p {
display: block;
}<div id="myDIV">
<div class="mainmenu">
<button class="btn">1 </button>
<div class="submenu">
<p> TEST1</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">2</button> <div class="submenu">
<p> TEST2</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">3</button> <div class="submenu">
<p> TEST3</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">4</button> <div class="submenu">
<p> TEST4</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">5</button> <div class="submenu">
<p> TEST5</p>
</div> </div>
</div>
是否可以执行此操作，甚至可以将按钮右对齐，但div左对齐？