单击具有相同父 div 的按钮时显示 div

Question

我希望在单击按钮时显示一个 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", 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  </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 向左对齐？

Answer 1

在 CSS 中选择 <p> 标记是错误的，因为您现在已将 div 移到外部，因此您必须选择类似，

.active + .submenu p {
    ....
}

+ 表示紧跟在指定元素之后但不是 在特定元素内。

这是你的更新代码，

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 + .submenu 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>