Question

我在<div>内有一张桌子，我希望能够在同一时间打开/关闭<div>，其中//<![CDATA[ var coll = document.getElementsByClassName("collapsible-service"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("activeContent"); var contentCollapsible = this.nextElementSibling; if (contentCollapsible.style.maxHeight) { contentCollapsible.style.maxHeight = null; } else { contentCollapsible.style.maxHeight = contentCollapsible.scrollHeight + "px"; } }); } //]]>有2个打开时间。

现在我可以打开/关闭div，但是当我打开另一个div时我不知道如何关闭上一个div。我知道这是因为我的脚本，但是我是JS的新手，希望能获得一些帮助。

.collapsible-service {
  background-color: #2c3a57;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: ridge #d20000;
  font-size: 15px;
}

.activeContent,
.collapsible-service:hover {
  background-color: #4f6798;
}

.collapsible-service:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.activeContent:after {
  content: "\2212";
}

.contentCollapsible {
  padding: 0px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<button class="collapsible-service">Hourly Rate</button>
<div class="contentCollapsible">
  <div class="table-block  customer-service__block">
    <table>
      <thead>
        <tr>
          <th>Services</th>
          <th>Timeframe</th>
          <th>Cost</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>General hourly rate</td>
          <td>N/A</td>
          <td>50.00$</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<button class="collapsible-service">Complete Adjustment</button>
<div class="contentCollapsible">
  <div class="table-block  customer-service__block">
    <table>
      <thead>
        <tr>
          <th>Services</th>
          <th>Timeframe</th>
          <th>Cost</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>General hourly rate</td>
          <td>N/A</td>
          <td>50.00$</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

import numpy as np
import pandas as pd
import matplotlib.pyplot as plot

df = pd.read_csv('historical_price_data.csv')
df = df[::-1]
df['Date'] = pd.to_datetime(df.Date, infer_datetime_format=True) 

# Set index to Date returns KeyError: "['Date'] not in index"
# df.set_index('Date', inplace=True)
df.sort_index(inplace=True)

# Log Transform 
log_transform = df['Close']
df['log'] = np.log(log_transform)

# Log transform plots fine by itself
ax = df[['Date', 'log']].plot(figsize=(14, 7), x='Date')

# Adding another plot to the figure results in log_transform being set to 0 !
ax = df[['Date', 'Close']].plot(figsize=(14, 7), x='Date', ax=ax)

plot.show()

Answer 1

创建另一个函数来获取类为contentCollapsible的所有元素，并对其进行迭代，并将maxHeight的样式设置为null

var coll = document.getElementsByClassName("collapsible-service");
var i;

function closeAllElement() {
  document.querySelectorAll('.contentCollapsible').forEach(function(item) {
    item.style.maxHeight = null;
  })

}

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    closeAllElement()
    this.classList.toggle("activeContent");
    var contentCollapsible = this.nextElementSibling;
    if (contentCollapsible.style.maxHeight) {
      contentCollapsible.style.maxHeight = null;
    } else {
      contentCollapsible.style.maxHeight = contentCollapsible.scrollHeight + "px";
    }
  });
}

.collapsible-service {
  background-color: #2c3a57;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: ridge #d20000;
  font-size: 15px;
}

.activeContent,
.collapsible-service:hover {
  background-color: #4f6798;
}

.collapsible-service:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.activeContent:after {
  content: "\2212";
}

.contentCollapsible {
  padding: 0px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<button class="collapsible-service">Hourly Rate</button>
<div class="contentCollapsible">
  <div class="table-block  customer-service__block">
    <table>
      <thead>
        <tr>
          <th>Services</th>
          <th>Timeframe</th>
          <th>Cost</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>General hourly rate</td>
          <td>N/A</td>
          <td>50.00$</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<button class="collapsible-service">Complete Adjustment</button>
<div class="contentCollapsible">
  <div class="table-block  customer-service__block">
    <table>
      <thead>
        <tr>
          <th>Services</th>
          <th>Timeframe</th>
          <th>Cost</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>General hourly rate</td>
          <td>N/A</td>
          <td>50.00$</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 2

您实际上并没有调用会关闭其他div的任何内容。您需要找到一个已经激活并关闭它。

类似这样的东西

var coll = document.getElementsByClassName("collapsible-service");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {

    var prev = document.getElementsByClassName("activeContent");
    if(prev[0] != null && prev[0] != this){
         prev[0].nextElementSibling.style.maxHeight = null;
         prev[0].classList.remove("activeContent");
    }

    this.classList.toggle("activeContent");
    var contentCollapsible = this.nextElementSibling;
    if (contentCollapsible.style.maxHeight){
      contentCollapsible.style.maxHeight = null;
    } 
    else 
    {
      contentCollapsible.style.maxHeight = contentCollapsible.scrollHeight + "px";
    } 
  });
}

请参阅LJLwOp上的Kamil Netopejr Folwarczny（@Kamil-Folwarczny）的钢笔CodePen。

当另一个打开时关闭div

2 个答案: