主页 / 问题 / 787856
Accepted
Дмитрий Сухоцкий
Asked:2020-02-20 23:00:58 +0800 CST2020-02-20 23:00:58 +0800 CST

光滑的手风琴js

  • 772

如何制作流畅的手风琴开启。我的意思是它是通过设置街区的高度和 St. Transition 来调节的。不给鱼，用文字自己做。

var btn_title = document.querySelectorAll('.test_title');
var disc = document.querySelectorAll('.test_disc');

for (var i = 0; i < btn_title.length; i++) {
  btn_title[i].addEventListener('click', fun_open);

  function fun_open(event) {
    for (var i = 0; i < btn_title.length; i++) {
      disc[i].classList.remove('test_disc_show');
      if (btn_title[i] == event.currentTarget) {
        disc[i].classList.toggle('test_disc_show');
      }
    }

  }

}
html .test {
  height: 1000px;
}

html .test_title {
  width: 180px;
  height: 30px;
  background: red;
  border: 1px solid black;
}

html .test_disc {
  width: 180px;
  height: 80px;
  background: blue;
  display: none;
  border: 1px solid black;
}

html .test_disc_show {
  display: block;
  transition: all 0.9s;
}
<div class="test">
  <div class="test_title test_title_one">test_title test_title_one</div>
  <!-- /.test_title -->
  <div class="test_disc test_disc_one">test_disc test_disc_one</div>
  <!-- /.test_disc -->
  <div class="test_title test_title_two">test_title test_title_two</div>
  <!-- /.test_title -->
  <div class="test_disc test_disc_two">test_disc test_disc_two</div>
  <!-- /.test_disc -->
  <div class="test_title test_title_one">test_title test_title_one</div>
  <!-- /.test_title -->
  <div class="test_disc test_disc_one">test_disc test_disc_one</div>
  <!-- /.test_disc -->
  <div class="test_title test_title_two">test_title test_title_two</div>
  <!-- /.test_title -->
  <div class="test_disc test_disc_two">test_disc test_disc_two</div>
  <!-- /.test_disc -->
</div>
<!-- /.test -->

javascript

2 个回答

  1. Best Answer

    var btn_title = document.querySelectorAll('.test_title');
var disc = document.querySelectorAll('.test_disc');

for (var i = 0; i < btn_title.length; i++) {
  btn_title[i].addEventListener('click', fun_open);

  function fun_open(event) {
    for (var i = 0; i < btn_title.length; i++) {
      disc[i].classList.remove('test_disc_show');
      if (btn_title[i] == event.currentTarget) {
        disc[i].classList.toggle('test_disc_show');
      }
    }

  }

}
    html .test {
  height: 1000px;
}

html .test_title {
  width: 180px;
  height: 30px;
  background: red;
  border: 1px solid black;
}

html .test_disc {
  overflow: hidden;
  width: 180px;
  height: 0;
  background: blue;
  border: 1px solid black;
  transition: all 0.9s;
}

html .test_disc_show {
  height: 80px;
  transition: all 0.9s;
}
    <div class="test">
  <div class="test_title test_title_one">test_title test_title_one</div>
  <!-- /.test_title -->
  <div class="test_disc test_disc_one">test_disc test_disc_one</div>
  <!-- /.test_disc -->
  <div class="test_title test_title_two">test_title test_title_two</div>
  <!-- /.test_title -->
  <div class="test_disc test_disc_two">test_disc test_disc_two</div>
  <!-- /.test_disc -->
  <div class="test_title test_title_one">test_title test_title_one</div>
  <!-- /.test_title -->
  <div class="test_disc test_disc_one">test_disc test_disc_one</div>
  <!-- /.test_disc -->
  <div class="test_title test_title_two">test_title test_title_two</div>
  <!-- /.test_title -->
  <div class="test_disc test_disc_two">test_disc test_disc_two</div>
  <!-- /.test_disc -->
</div>
<!-- /.test -->

    • 1

  2. 如果您确定文本不会很大，那么

    .test_disc {
  max-height: 0;
  transition: all 0.9s;
  overflow: hidden;
}
.test_disc.test_disc_show {
  max-height: приблизительное_значение_с_запасом px;
}

    好吧，或者一般安排js高度......我没有看到这种方法的其他选项

    • 0

相关问题