Question

我设计了一个像图像一样的手风琴菜单。如果单击菜单，打开的菜单将关闭。这是手风琴的功能。但在这个设计中，我逐个点击菜单，但前一个没有关闭..如何解决这个问题？提前致谢

＆＃13;

jQuery(document).ready(function () {
    var acc = document.getElementsByClassName("accordion");
    var i;
    for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function () {
            this.classList.toggle("active");
            this.nextElementSibling.classList.toggle("show");
        };
    }
    
});

＆＃13;

.boot-accordian {
  padding-top: 2%;
}
.boot-accordian button.accordion {
  text-transform: uppercase;
  background-color: #362f29;
  color: #e96f0a;
  cursor: pointer;
  width: 100%;
  border: none;
  border-top: 1px solid #3e352c;
  border-bottom: 1px solid #3e352c;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  padding: 0.8% 1% 0.8% 3%;
}
.boot-accordian .para {
  padding-left: 1px;
  padding-top: 2%;
  font-size: 15px;
}
.boot-accordian button.accordion.active,
.boot-accordian button.accordion:hover {
  background-color: #362f29;
}
.boot-accordian button.accordion:after {
  font-size: 13px;
  font-family: FontAwesome;
  content: "\f067";
  float: right;
}
.boot-accordian button.accordion.active:after {
  content: "\f068";
  font-family: FontAwesome;
  font-size: 13px;
}
.boot-accordian div.panel {
  padding: 0 18px;
  display: none;
  background-color: #433a31;
}
.boot-accordian div.panel.show {
  display: block;
  margin: 0;
  padding-bottom: 5%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boot-accordian">
<button class="accordion">listings</button>
<div class="panel">
<p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p>
 </div>
<button class="accordion">contract information</button>
 <div class="panel">
<p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of  contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p>
 </div>
<button class="accordion">letter templates</button>
 <div class="panel">
 <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of  contracts, title policies - and send important date reminders to your Outlook or Google Calendaraccounts, iphone or Blackberry.</p>
</div>
<button class="accordion">tasks and task templates</button>
 <div class="panel">
<p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p>
 </div>
<button class="accordion">secure file storage</button>
<div class="panel">
<p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p>
</div>
  <button class="accordion">reports</button>
 <div class="panel">
 <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p>
 </div>
 </div>

＆＃13;

Answer 1

请看一下这个jQuery方法：

if (!$(this).hasClass("active")) {
     var oldAcc = $(".accordion.active");
     oldAcc.toggleClass("active");
     oldAcc.next().toggleClass("show");
}

通过上面的代码，我们可以参考已经打开的手风琴并在打开另一个之前关闭它。

jQuery(document).ready(function() {

  $(".accordion").click(function() {
    if (!$(this).hasClass("active")) {
      var oldAcc = $(".accordion.active");
      oldAcc.toggleClass("active");
      oldAcc.next().toggleClass("show");
    }
    $(this).toggleClass("active");
    $(this).next().toggleClass("show");


  });

});

.boot-accordian {
  padding-top: 2%;
}
.boot-accordian button.accordion {
  text-transform: uppercase;
  background-color: #362f29;
  color: #e96f0a;
  cursor: pointer;
  width: 100%;
  border: none;
  border-top: 1px solid #3e352c;
  border-bottom: 1px solid #3e352c;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  padding: 0.8% 1% 0.8% 3%;
}
.boot-accordian .para {
  padding-left: 1px;
  padding-top: 2%;
  font-size: 15px;
}
.boot-accordian button.accordion.active,
.boot-accordian button.accordion:hover {
  background-color: #362f29;
}
.boot-accordian button.accordion:after {
  font-size: 13px;
  font-family: FontAwesome;
  content: "\f067";
  color: @color_24;
  float: right;
}
.boot-accordian button.accordion.active:after {
  content: "\f068";
  font-family: FontAwesome;
  font-size: 13px;
}
.boot-accordian div.panel {
  padding: 0 18px;
  display: none;
  background-color: #433a31;
}
.boot-accordian div.panel.show {
  display: block;
  margin: 0;
  padding-bottom: 5%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boot-accordian">
  <button class="accordion">listings</button>
  <div class="panel">
    <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p>
  </div>
  <button class="accordion">contract information</button>
  <div class="panel">
    <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p>
  </div>
  <button class="accordion">letter templates</button>
  <div class="panel">
    <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendaraccounts, iphone or Blackberry.</p>
  </div>
  <button class="accordion">tasks and task templates</button>
  <div class="panel">
    <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p>
  </div>
  <button class="accordion">secure file storage</button>
  <div class="panel">
    <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p>
  </div>
  <button class="accordion">reports</button>
  <div class="panel">
    <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p>
  </div>
</div>

Answer 2

注意：首先这不是bootstrap手风琴

这里是解决方案，只需在单击

时添加这两行

$(".accordion").removeClass("active");
$(".panel").removeClass("show");

最好像这样写一些东西（Pure JQuery）

jQuery(document).ready(function() {
    $(".accordion").click(function(){
    $(".accordion").removeClass("active");
    $(".panel").removeClass("show");
    $(this).addClass("active");
    $(this).next(".panel").addClass("show");
  })
});

fiddle

Answer 3

如果您只是希望在其他人向下滑动时向下滑动，请使用以下代码：

$('.accordion').click(function() {
    var targetElement = $(this).next('.panel');
    targetElement.slideToggle();
    targetElement.siblings('.panel').slideUp();
});

示例CODEPEN

ENJOY ......：）

Answer 4

用jQuery做正确的事：

jQuery(document).ready(function () {
  $('.accordion').on('click', function() {
    var target = $(this),
      activeEl = $('.active'),
      openedEl = $('.show');

      // remove the active state
      activeEl.removeClass('active');
      openedEl.removeClass('show');
      // add active state for unactive elements only
      if(!target.is(activeEl)) {
        target.addClass('active');
        target.next().addClass('show');
      }
  });
});

Bootstrap手风琴菜单不起作用

4 个答案: