Question

我的手风琴在开启和关闭的基础上不断填补我div更大更小的空间。我想在它周围包裹div并将其设置为扩展的手风琴的高度以防止这种行为。麻烦是我的js依赖于选择this.nextSibling而且会破坏一切。

var acc = document.getElementsByClassName("review-button");
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';
    } 
  }
}

必须使用＆＃34; this＆＃34;在范围内，因为有多个手风琴。我最初的想法是做一些像......

this.nextElementSibling.children[0];

但这没有用。

如何将当前内容包装在具有设定高度的div中，同时仍保留手风琴功能？

<!--accordion 1-->     
<button class="review-button"  data-target="#demo{{ gameIndex }}">
     <span class="review-button-chevron fa fa-angle-down"></span>       
      Our Reviews
     </button>

<!-- Slide out -->
<div class="quote-machine-container">
    <div id="demo{{ gameIndex }}" class=" quote-machine"></div>
</div>

<!--accordion 2-->
 <button class="review-button"  data-target="#demo{{ gameIndex }}">
     <span class="review-button-chevron fa fa-angle-down"></span>       
      Our Reviews
     </button>

<!-- Slide out -->
<div class="quote-machine-container">
    <div id="demo{{ gameIndex }}" class=" quote-machine"></div>
</div>

Answer 1

将每个<header>和<div>放入其自己的<section>
将所有内容包裹在<main>中，并为其添加了eventListener()。对它的任何点击都将委托给点击的标题（e.target。）
事件处理程序（acc()）将：
- 通过将e.target（点击节点）与e.currentTarget（此时正在捕获的节点）进行比较来确定e.target（点击节点）。
- 成立后，.active将失去或获得nextElementSibling课程。
- 为了消除.active + .x-panel的限制属性，我们使用简单的CSS规则集替换该功能：nextElementSibling与var main = document.getElementById("x-main"); main.addEventListener('click', acc, false); function acc(e) { if (e.target !== e.currentTarget) { var tgt = e.target; tgt.classList.toggle("active"); } }基本相同。

<强>段

＆＃13;

.x-section {
  height: 100px;
}
.x-header {
  cursor: pointer;
  border: 3px outset grey;
  height: 30px;
}
.x-panel {
  border: 3px inset black;
  max-height: 0;
  opacity: 0;
  transition: opacity .2s ease-in;
}
.active + .x-panel {
  opacity: 1;
  max-height: 300px;
  overflow-y: hidden;
  transition: max-height 1s ease-in .1s, opacity 1s;
}

＆＃13;

<main id='x-main'>
  <section class='x-section'>
    <header class='x-header'>HEADER</header>
    <div class='x-panel'>
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
    </div>
  </section>
  <section class='x-section'>
    <header class='x-header'>HEADER</header>
    <div class='x-panel'>
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
    </div>
  </section>
  <section class='x-section'>
    <header class='x-header'>HEADER</header>
    <div class='x-panel'>
      CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
    </div>
  </section>
</main>

＆＃13;

$myString = '<div id="craftysyntax_1" style="float: right;"><script type="text/javascript" src="https://livehelp.clipboards.com/livehelp_js.php?eo=0&amp;department=1&amp;serversession=1&amp;pingtimes=10&amp;dynamic=Y&amp;creditline=W"></script></div>';
preg_match("/id=[\"']craftysyntax_(\d+)[\"']/", $myString, $output);
print_r($output);  //Array ( [0] => id="craftysyntax_1" [1] => 1 )
print_r($output[1]);//1

＆＃13;

如何选择兄弟元素的孩子？

1 个答案: