如何在此手风琴中打开默认选项卡，并在打开另一个选项卡时关闭选项卡？

时间：2017-07-28 17:24:20

标签： javascript html css tabs accordion

我不是很擅长javascript而且我只是使用w3的基本代码。我试图在我的网站上放一个手风琴，列出一些类别的服务，我希望一个标签可以随时扩展。

这是我目前的代码：

＆＃13;
＆＃13; 
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}
＆＃13; 
/* Style the buttons that are used to open and close the accordion panel */

button.accordion {
  background-color: #3bb7df;
  color: #fff;
  cursor: pointer;
  padding: 0 20px;
  line-height: 54px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  font-size: 17px;
  font-weight: 300;
}


/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

button.accordion.active,
button.accordion:hover {
  background-color: #2894b7;
}

button.accordion:after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  border: none;
  float: right;
  margin-left: 5px;
  text-shadow: none;
}

button.accordion.active:after {
  content: "–";
}


/* Style the accordion panel. Note: hidden by default */

div.panel {
  padding: 0;
  background-color: #f5f5f5;
  border: none;
  border-radius: 0px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

div.panel li {
  list-style: none;
  border-top: solid 1px #ddd;
}

div.panel li:hover {
  background: #e0e0e0;
}

div.panel a {
  color: #1d1d1d;
  font-size: 15px;
  display: block;
  padding: 12px 0;
}

div.panel i.fa-angle-right {
  padding: 0 15px;
}
＆＃13; 
<button class="accordion">Section 1</button>
<div class="panel">
  <ul>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 1</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 2</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 3</a></li>
  </ul>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <ul>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 1</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 2</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 3</a></li>
  </ul>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <ul>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 1</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 2</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 3</a></li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

所有默认代码都可以在手风琴的w3网站上找到。

我希望默认情况下打开第一个标签页，然后如果打开另一个标签页，请关闭另一个标签页。

感谢。

3 个答案:

答案 0 :(得分：1)

默认打开第一个标签

要默认打开第一个选项卡（或任何其他选项卡），只需在所需的手风琴索引上调用click()方法即可。这可以在JavaScript结束时完成：

acc[0].click(); // <-- Invoke the onClick for the first tab.

始终保持一个标签展开

要始终打开一个手风琴标签，单选按钮样式，您需要保存对最后点击的手风琴项目的引用，然后执行一些逻辑以关闭它，然后再打开新的手风琴菜单。

请参阅下面的工作示例。

完整示例

我通过将操作移到单独的功能，并包括opening first tab by default和always keep one tab expanded更改来清理您的代码。

JS的第4行有一个alwaysOneOpen变量，您可以切换以更改行为。目前确实如此，这使您无法关闭所有标签。如果将此更改为false，则可以通过单击来关闭该选项卡。

var acc = document.getElementsByClassName("accordion");
var i;
var last;
var alwaysOneOpen = true;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    // If the same accordion was clicked, toggle it
    if (last === this && !alwaysOneOpen) {
      toggleAccordion(last);
    } else {
      // If another accordion was open, close it
      if (last) {
        closeAccordion(last);
      }
      // Open clicked accordion
      last = this;
      openAccordion(last);
    }
  };
}

var closeAccordion = function(acc) {
  acc.classList.remove("active");
  var panel = acc.nextElementSibling;
    panel.classList.remove("active");
  panel.style.maxHeight = null;
}

var openAccordion = function(acc) {
  acc.classList.add("active");
  var panel = acc.nextElementSibling;
    panel.classList.add("active");
  panel.style.maxHeight = panel.scrollHeight + "px";
}

var toggleAccordion = function(acc) {
  last.classList.toggle("active");
  var panel = last.nextElementSibling;
  panel.classList.toggle("active");
  if (panel.style.maxHeight) {
    panel.style.maxHeight = null;
  } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
  }
};

last = acc[0];
toggleAccordion(last);
/* Style the buttons that are used to open and close the accordion panel */

button.accordion {
  background-color: #3bb7df;
  color: #fff;
  cursor: pointer;
  padding: 0 20px;
  line-height: 54px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  font-size: 17px;
  font-weight: 300;
}


/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

button.accordion.active,
button.accordion:hover {
  background-color: #2894b7;
}

button.accordion:after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  border: none;
  float: right;
  margin-left: 5px;
  text-shadow: none;
}

button.accordion.active:after {
  content: "–";
}


/* Style the accordion panel. Note: hidden by default */

div.panel {
  padding: 0;
  background-color: #f5f5f5;
  border: none;
  border-radius: 0px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

div.panel li {
  list-style: none;
  border-top: solid 1px #ddd;
}

div.panel li:hover {
  background: #e0e0e0;
}

div.panel a {
  color: #1d1d1d;
  font-size: 15px;
  display: block;
  padding: 12px 0;
}

div.panel i.fa-angle-right {
  padding: 0 15px;
}
   

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">Section 1</button>
<div class="panel">
  <ul>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 1</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 2</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 3</a></li>
  </ul>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <ul>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 1</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 2</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 3</a></li>
  </ul>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <ul>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 1</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 2</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 3</a></li>
  </ul>
</div>

答案 1 :(得分：0)

考虑将当前打开选项卡的索引存储在数字变量中。然后，在点击任何标签时，移除"active"类acc[index]。

当然，您应该在停用acc[index]之后存储索引，这样您就不会停用所点击的项目。

答案 2 :(得分：0)

您没有指定jQuery解决方案是否可以接受，但我在此提供了一个。如果这是你需要的话，我可以重新获得香草JS。

另请注意，我简化了＆＃39; scrollHeight＆＃39;的逻辑。使用max-height

的inherit属性

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('.accordion').on('click', function() {
  
    //remove 'active' from all items first
    $('.accordion').removeClass('active');
    
    // now add 'active' to the one clicked
    $(this).toggleClass('active');
  })

  //change to whichever number you want active on load
  $('.accordion:nth-of-type(2)').click();

})
＆＃13; 
/* Style the buttons that are used to open and close the accordion panel */

button.accordion {
  background-color: #3bb7df;
  color: #fff;
  cursor: pointer;
  padding: 0 20px;
  line-height: 54px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  font-size: 17px;
  font-weight: 300;
}


/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

button.accordion.active,
button.accordion:hover {
  background-color: #2894b7;
}

button.accordion:after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  border: none;
  float: right;
  margin-left: 5px;
  text-shadow: none;
}

button.accordion.active:after {
  content: "–";
}


/* this will adjst the max-height for active items*/

.accordion.active+.panel {
  max-height: inherit;
}


/* Style the accordion panel. Note: hidden by default */

div.panel {
  padding: 0;
  background-color: #f5f5f5;
  border: none;
  border-radius: 0px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

div.panel li {
  list-style: none;
  border-top: solid 1px #ddd;
}

div.panel li:hover {
  background: #e0e0e0;
}

div.panel a {
  color: #1d1d1d;
  font-size: 15px;
  display: block;
  padding: 12px 0;
}

div.panel i.fa-angle-right {
  padding: 0 15px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">Section 1</button>
<div class="panel">
  <ul>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 1</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 2</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 3</a></li>
  </ul>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <ul>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 1</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 2</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 3</a></li>
  </ul>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <ul>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 1</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 2</a></li>
    <li><a href="#"><i class="fa fa-angle-right"></i>Link 3</a></li>
  </ul>
</div>
<hr/>
<div> <code>.accordion.active + .panel {
    max-height:inherit;
}</code></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题