Question

我想让我的手风琴做我想做的事。现在它工作正常，但我想让一个标签缩小而其他标签打开。基本上我想在当时打开一个标签。这是代码：

HTML：

function namelength() {
  name = document.getElementById("name");
  check = document.getElementById("namecheck");
  if (name.value.length > 3) {
    check.innerHTML = "Check."; -----> check.innerHTML = "<i class='fa fa-check'></i>"
    name.style.border = "2px solid green";
    namecheck.style.color = "green";
  }

}

function checkform() {
  check = document.getElementById("namecheck").innerHTML;
    if (check == "Check.") -----> if (check = "<i class='fa fa-check'></i>") {
      ...
    }

JS：

    <button class="accordion">Kontaktai</button>
  <div class="panel">

    <ul style="list-style-type:none; text-align: center; margin-left: -35px;">
      <p style="font-size: 15px; font-weight: bold;">Text</p>


  </div>

  <button class="accordion">Kaip mus rasti?</button>
  <div class="panel">
      <p style="font-size: 15px; font-weight: bold; text-align: center;">Text</p>

  </div>

  <button class="accordion">Apie mus</button>
  <div class="panel">
    <p>Text</p>
  </div>

我希望你能从这段代码中理解我想要的东西。

Answer 1

代码是递归和冗余的，但它可以很好地从元素中删除活动类，你可以根据需要添加更多操作：

var acc = document.getElementsByClassName("accordion");
  var i;
  for (i = 0; i < acc.length; i++) {
	acc[i].onclick = function() {
	  var acc = document.getElementsByClassName("accordion");
	  var i;
	  for (i = 0; i < acc.length; i++) {
		  acc[i].className = acc[i].className.replace("active","");
	  }
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
          panel.style.maxHeight = null;
      } else {
          panel.style.maxHeight = panel.scrollHeight + 'px';
      }
    }
  }

.active{
  background:yellow;
}

	 <button class="accordion">Kontaktai</button>
  <div class="panel">

    <ul style="list-style-type:none; text-align: center; margin-left: -35px;">
      <p style="font-size: 15px; font-weight: bold;">Text</p>


  </div>

  <button class="accordion">Kaip mus rasti?</button>
  <div class="panel">
      <p style="font-size: 15px; font-weight: bold; text-align: center;">Text</p>

  </div>

  <button class="accordion">Apie mus</button>
  <div class="panel">
    <p>Text</p>
  </div>

希望这有帮助。

Answer 2

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(".accordion").click(function () {
    if($(this).hasClass('active')){
      $(this).toggleClass("active");
      $(this).next(".panel").toggle();
    }else{
      $(".accordion").removeClass("active");
      $(".panel").hide();
      $(this).addClass("active");
      $(this).next(".panel").toggle();
    }

});</script>

请试试这个。它对我有用。

Answer 3

你可以使用jquery accordion插件。它提供了许多高级功能。希望this链接可以帮助您。

当其他标签打开时如何使手风琴缩小

3 个答案: