Javascript 或 OLD JQuery Accordion 多个在一页上，无需相互切换

Question

我正在尝试制作可重用的 Javascript block ，但一直碰壁。这是当前令人烦恼的问题，但我有一张幻灯片具有相同的基本问题。我用谷歌搜索了几次，但我认为我用的词不正确......

目标:制作一个与类一致的 div。里面有几个 div(并不总是相同的数字)，其类为 AccordionItem。让每个 Accordion div 中的第一个 Accordion 元素可见，而其余的切换关闭(accordionItem 内的 div 更改可见性，h4 充当提示。)当您单击不可见部分时，它会切换为可见，并且旧的开关关闭。我希望页面上有多个这些，并且它们的可见性和切换不会互相影响。我不需要任何动画或任何复杂的行为。

最大限制:我目前使用的网站无法超越 jQuery 1.4.2(向上移动会破坏主页菜单，IT 部门也不想处理修复它，并且我没有访问权限)所以我无法在不破坏菜单的情况下调用更高版本，但是找到可在网站上运行的 Accordion 脚本(或其他任何内容)是一件痛苦的事情。

其他限制，我更喜欢 Accordion ，如果它破裂了，破裂时所有碎片都可见，这样所有信息仍然可用。这些用于使页面更短，但我们需要可访问的信息。

我是如何解决这个问题的。每次我需要一个新的 Accordion 时，我都会复制 JavaScript 并使用更改的类名制作另一个 JavaScript，这很荒谬，但我不这样做对 javascript 的理解不够好，无法做其他事情。我更多地使用 html 和 css，所以没有构建这个 javascript。我对幻灯片也有同样的基本问题，它与我所坚持的 jquery 一起工作，但我不知道如何防止幻灯片的两个实例合并为一个。

我知道我希望它基本上为每个 Accord div 隐藏所有的 AccordionItems，取消隐藏第一个，当我单击另一个时，仅更改我所在的特定 AccordionItems。或者，如果它动态插入 ids(这样我就不必将它们输入到页面代码中)并以这种方式运行它也可以。我正在努力让不知道代码如何工作的人可以轻松地使用它。

CSS 和 JavaScript；

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.4.2.min.js"></script>

<style>

      .accordionItem h4 { margin: 0;  font-size: 15px;  padding: 10px 20px 10px 10px; color: #fff; background: url('/images/image.aspx?iid=10691') right center no-repeat #fff;color: #a50050;  font-weight:600; font-family: 'Lucida Sans', Verdana, Arial, Sans-Serif; line-height: normal;}
      .accordionItem h4:hover { cursor: pointer; }
      .accordionItem div { margin: 0; padding: 1em 0.4em; background-color: rgba(165, 0, 80,.05); border-bottom: 1px solid #ccc; }
      .accordionItem.hide h4 { color: #a50050; background-color: #fff; font-weight:400; background: url('/images/image.aspx?iid=10690') right center no-repeat; border-bottom: 1px solid #ccc;}
      .accordionItem.hide div { display: none; }  

</style>


<script type="text/javascript">
    //<![CDATA[

    var accordionContainers = new Array();// ADDED BY ME
    var accordionItems = new Array();


    function init() {

    //Find each accordion ADDED BY ME
    var accordDivs = document.getElementsByTagName( 'div' );
    for ( var i = 0; i < accordDivs.length; i++) {
        if (accordDivs[i].className == 'accord') accordionContainers.push( accordDivs[i] );
        }

      // Grab the accordion items from each div 
      var divs = document.getElementsByTagName( 'div' );
      for ( var i = 0; i < divs.length; i++ ) {
        if ( divs[i].className == 'accordionItem' ) accordionItems.push( divs[i] );
      }

      // Assign onclick events to the accordion item headings
      for ( var i = 0; i < accordionItems.length; i++ ) {
        var h4 = getFirstChildWithTagName( accordionItems[i], 'H4' );
        h4.onclick = toggleItem;
      }

      // Hide all accordion item bodies except the first
      for ( var i = 1; i < accordionItems.length; i++ ) {
        accordionItems[i].className = 'accordionItem hide';
      }
    }

    function toggleItem() {
      var itemClass = this.parentNode.className;

      // Hide all items
      for ( var i = 0; i < accordionItems.length; i++ ) {
        accordionItems[i].className = 'accordionItem hide';
      }

      // Show this item if it was previously hidden
      if ( itemClass == 'accordionItem hide' ) {
        this.parentNode.className = 'accordionItem';
      }
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

    //}

     //]]>
       window.onload = function()
      {
      init();
     };

    </script>

我想出了如何找到页面上的所有 Accord div，但不知道如何处理它们。

示例剥离 Accordion :(此代码有效，但所有 Accordion 元素都被认为是相同的，因此所有都一起切换。周围的 div 一致不在原始 JavaScript 中，我在开始时添加了它，同时试图弄清楚如何一次切换一个部分。)

    <div style="width:50%">
    <div class="accord">
    <div class="accordionItem">
      <h4>Headline</h4>
      <div>
        <p>Copy to Initially Show</p>
      </div>
    </div>

    <div class="accordionItem">
      <h4>Headline</h4>
      <div>
        <p>Copy to hide</p>
      </div>
    </div>

    <div class="accordionItem">
      <h4>Headline</h4>
      <div>
        <p>Copy to Hide </p>
      </div>
    </div>
</div><!-- END accord-->

<p>Blah blah blah to break up the page<p>
<div class="accord">
    <div class="accordionItem">
      <h4>Headline</h4>
      <div>
        <p>Copy to Initially Show</p>
      </div>
    </div>

    <div class="accordionItem">
      <h4>Headline</h4>
      <div>
        <p>Copy to hide</p>
      </div>
    </div>

    <div class="accordionItem">
      <h4>Headline</h4>
      <div>
        <p>Copy to Hide </p>
      </div>
    </div>
</div><!-- END accord-->
</div>

感谢您的任何回复，尤其是那些对我缺少的明显可笑部分进行冗长解释的回复...我也喜欢示例。

Answer 1

问题在于:

for ( var i = 0; i < accordionItems.length; i++ ) {
        var h4 = getFirstChildWithTagName( accordionItems[i], 'H4' );
        h4.onclick = toggleItem;
 }

这里accordionItems包含了accordionItems的整个列表。

在 toggleItem 函数中，您再次迭代整个列表并切换类 hide。相反，您需要识别目标并查找它的父节点。仅在该父节点内，您必须切换该类。

您需要像这样更改 toggleItem 函数:

  function toggleItem() {

  var itemClass = this.parentNode.className;

  var accord =  this.parentNode.parentNode.querySelectorAll("div");

 // get that parent alone and it's children div

  for ( var i = 0; i < accord.length; i++ ) {
    accord[i].className = 'accordionItem hide';
  }


  // Show this item if it was previously hidden
  if ( itemClass == 'accordionItem hide' ) {
     this.parentNode.className = 'accordionItem';
  }
}

<强> DEMO