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>

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

1 个答案: