Bootstrap手风琴菜单不起作用 [英] Bootstrap accordion menu not working

查看：110
本文介绍了Bootstrap手风琴菜单不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



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

  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）;};}}）;  

  .boot-accordian {padding-top：2％;}。boot-accordian button.accordion {text-transform：uppercase; background-color：＃362f29;颜色：＃e96f0a;光标：指针;宽度：100％; border：none; border-top：1px solid＃3e352c; border-bottom：1px solid＃3e352c; text-align：left;概要：无; font-size：15px;过渡时间：0.4s; padding：0.8％1％0.8％3％;}。boot-accordian .para {padding-left：1px;填充顶部：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;内容：\f067; float：right;}。boot-accordian button.accordion.active:after {content：\f068; font-family：FontAwesome; font-size：13px;}。boot-accordian div.panel {padding：0 18px;显示：无; background-color：＃433a31;}。boot-accordian div.panel.show {display：block;保证金：0; padding-bottom：5％;}

< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =boot-accordian><按钮class =accordion>列表< / button>< div class =panel>< p class =para>存储所有必要的合约信息，例如重要日期，代理联系信息，特殊合同团队等。您甚至可以上传合同，产权政策的数字副本 - 并将重要日期提醒发送到您的Outlook或Google日历帐户，iPhone或Blackberry。< / p> < / div>< button class =accordion>合约资讯< /按钮> < div class =panel>< p class =para>存储所有必要的合约信息，例如重要日期，代理联系信息，特殊合同团队等。您甚至可以上传合同，产权政策的数字副本 - 并将重要日期提醒发送到您的Outlook或Google日历帐户，iPhone或Blackberry。< / p> < / div>< button class =accordion>字母模板< / button> < div class =panel> < p class =para>储存所有必要的合约资讯，例如重要日期，更接近&代理人联系信息，特殊合同团队等。您甚至可以上传合同，标题政策的数字副本 - 并将重要日期提醒发送到您的Outlook或Google Calendaraccounts，iPhone或Blackberry。< / p>< / div>< button class =accordion>任务和任务模板< / button> < div class =panel>< p class =para>存储所有必要的合约信息，例如重要日期，代理联系信息，特殊合同团队等。您甚至可以上传合同，产权政策的数字副本 - 并将重要日期提醒发送到您的Outlook或Google日历帐户，iPhone或Blackberry。< / p> < / div>< p class =para>存储所有必要的合约信息，例如重要的日期，更接近&代理人联系信息，特殊合同团队等。您甚至可以上传合同，标题政策的数字副本 - 并将重要日期提醒发送到您的Outlook或Google日历帐户，iPhone或Blackberry。< / div> < button class =accordion>报告< / button> < div class =panel> < p class =para>储存所有必要的合约资讯，例如重要日期，更接近&代理联系信息，特殊合同团队等。您甚至可以上传合同，产权政策的数字副本 - 并将重要日期提醒发送到您的Outlook或Google日历帐户，iPhone或Blackberry。< / p> < / DIV> < / div>

解决方案

请看看这个jQuery方法：

$ p $ if（！$（this）.hasClass（active）） {
var oldAcc = $（。accordion.active）;
oldAcc.toggleClass（active）;
oldAcc.next（）。toggleClass（show）;





$ b

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

  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;颜色：＃e96f0a;光标：指针;宽度：100％; border：none; border-top：1px solid＃3e352c; border-bottom：1px solid＃3e352c; text-align：left;概要：无; font-size：15px;过渡时间：0.4s; padding：0.8％1％0.8％3％;}。boot-accordian .para {padding-left：1px;填充顶部：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;内容：\f067;颜色：@ 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;显示：无; background-color：＃433a31;}。boot-accordian div.panel.show {display：block;保证金：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>列表< / button> < div class =panel> < p class =para>储存所有必要的合约资讯，例如重要日期，更接近&代理联系信息，特殊合同团队等。您甚至可以上传合同，产权政策的数字副本 - 并将重要日期提醒发送到您的Outlook或Google日历帐户，iPhone或Blackberry。< / p> < / DIV> < button class =accordion>合约资讯< / button> < div class =panel> < p class =para>储存所有必要的合约资讯，例如重要日期，更接近&代理联系信息，特殊合同团队等。您甚至可以上传合同，产权政策的数字副本 - 并将重要日期提醒发送到您的Outlook或Google日历帐户，iPhone或Blackberry。< / p> < / DIV> < button class =accordion>字母模板< / button> < div class =panel> < p class =para>储存所有必要的合约资讯，例如重要日期，更接近&代理联系信息，特殊合同团队等。您甚至可以上传合同，产权政策的数字副本 - 并将重要日期提醒发送到您的Outlook或Google Calendaraccounts，iphone或Blackberry。< / p> < / DIV> < button class =accordion>任务和任务模板< / button> < div class =panel> < p class =para>储存所有必要的合约资讯，例如重要日期，更接近&代理联系信息，特殊合同团队等。您甚至可以上传合同，产权政策的数字副本 - 并将重要日期提醒发送到您的Outlook或Google日历帐户，iPhone或Blackberry。< / p> < / DIV> < button class =accordion>安全文件存储< / button> < div class =panel> < p class =para>储存所有必要的合约资讯，例如重要日期，更接近&代理联系信息，特殊合同团队等。您甚至可以上传合同，产权政策的数字副本 - 并将重要日期提醒发送到您的Outlook或Google日历帐户，iPhone或Blackberry。< / p> < / DIV> < button class =accordion>报告< / button> < div class =panel> < p class =para>储存所有必要的合约资讯，例如重要日期，更接近&代理联系信息，特殊合同团队等。您甚至可以上传合同，产权政策的数字副本 - 并将重要日期提醒发送到您的Outlook或Google日历帐户，iPhone或Blackberry。< / p> < / div>< / div>

I have designed a accordion menu like in the image. If you click a menu the opened menu will get closed.This is the functionality of accordion. But in this design i've clicks menu one by one but the previous one was not closing.. How to fix this issue? Thanks in advance

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");
        };
    }
    
});

.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%;
}

<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>

解决方案

Please have a look at this jQuery approach:

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

With above code we are getting reference to already opened accordion and closing it before opening the other one.

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>

这篇关于Bootstrap手风琴菜单不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆