Question

我花了大约一个小时来查看堆栈溢出的答案，寻找解决我问题的方法。我的尝试没有成功，所以现在我会要求准确显示我正在使用的代码。该守则最初来自w3schools。

由于每个部分中将显示的数据量，只有在用户完成阅读后关闭它们才有意义。其他明智的可以滚动一段时间。

感谢任何帮助。

编辑： tl：dr我想这样做，所以一次只有一部手风琴是活动的，并隐藏其余部分的内容。

定型

expect { post :create, employee: invalid_employee_params }.to_not change(Employee, :count)

HTML

 <style>
 .fom {
   position: relative;
   z-index: 1;
   max-width: 700px;
   background: #fff;
   margin: 0 auto 100px;
   padding: 45px;
   text-align: center;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
   background-image: url('pelican.jpg');

 }
 button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    border-bottom: 2px solid #fff;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}
button.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 5px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
</style>

脚本

   <div class="fom">
 <h2>Police SOP's </h2>
 <p>These SOP's will be updated frequently so check them often</p>

 <button class="accordion">Section 1</button>
 <div class="panel">
   <p><?php echo$row['loadout']; ?></p>
 </div>

 <button class="accordion">Section 2</button>
 <div class="panel">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </div>

 <button class="accordion">Section 3</button>
 <div class="panel">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </div>

样式包装在head标签中，所有主要的html和脚本都包含在body标签中

Answer 1

以下是代码中稍有更改的工作示例：

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
  	for (let i = 0; i < acc.length; i++) {
        acc[i].classList.remove('active');
        acc[i].style.maxHeight = null;
        acc[i].nextElementSibling.style.maxHeight = null;
    }
    this.style.maxHeight = this.scrollHeight+'px';
    this.classList.add('active');
    var panel = this.nextElementSibling;
     panel.style.maxHeight = panel.scrollHeight + 'px'
    
  }
}

.fom {
  position: relative;
  z-index: 1;
  max-width: 700px;
  background: #fff;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  background-image: url('pelican.jpg');
}

button.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  border-bottom: 2px solid #fff;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}

button.accordion:after {
  content: '\02795';
  /* Unicode character for "plus" sign (+) */
  font-size: 5px;
  color: #777;
  float: right;
  margin-left: 5px;
}

button.accordion.active:after {
  content: "\2796";
  /* Unicode character for "minus" sign (-) */
}

div.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<div class="fom">
  <h2>Police SOP's </h2>
  <p>These SOP's will be updated frequently so check them often</p>

  <button class="accordion">Section 1</button>
  <div class="panel">
    <p>
      <?php echo$row['loadout']; ?>
    </p>
  </div>

  <button class="accordion">Section 2</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

  <button class="accordion">Section 3</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

注意：如果你使用jQuery，同样的事情会容易得多。试一试。

更新： @Craig Mason 关于评论的解决方案已经处理了关闭活动手风琴的问题。 https://jsfiddle.net/at9wjbde/1/是他提到的小提琴

Answer 2

因此，如果我理解正确，您希望隐藏每个手风琴按钮下方的内容，除非按下该按钮。您可以这样做的一种方法是向当前单击的按钮添加active类，如下所示：

acc[i].onclick = function() {
    var accs = document.querySelectorAll('.accordion');
    for (let i = 0; i < accs.length; ii++) {
        accs[i].classList.remove('active');
    }

    acc[i].classList.add('active');
}

然后在你的CSS中，你可以自动隐藏非活动按钮之后的所有内容，如下所示：

.accordion:not(.active) + .panel {
     display: none;
 }

+用于选择直接跟在前面的选择器之后的元素。

Answer 3

你提到了你对jquery解决方案的兴趣，所以这里是：

$(".accordion").click(function(){
  $(".accordion").removeClass("active");
  $(".accordion").next().css('max-height', '0');
  $(this).addClass("active");
  $(this).next().css('max-height', $(this).next().prop('scrollHeight'));
});

在此fiddle

中查看它

Answer 4

对之前发布的代码稍加修改：如果您单击一个按钮，则可以关闭所有按钮，并且它可以再次关闭单击的按钮/手风琴：

mfccs = []
parameters = []
for i in range(len(mfcc_list)):
  m,p=my_data(mfcc_list[i],parameter_list[i])
  mfccs.append(m)
  parameters.append(p)

关闭除活动按钮之外的所有其他Accordion按钮

4 个答案: