单页中的多个手风琴

Question

我试图在同一页面上使用两个或更多的手风琴。所以现在第一支手风琴正在运转，但第二支手风琴不起作用。

我想知道错过了多次活动。

这是我的html和js代码。任何帮助高度赞赏。

＆＃13;

＆＃13;

$('#accord > ul > li:has(ul)').addClass("has-sub");

$('#accord > ul > li > a').click(function() {
  var checkElement = $(this).next();

  $('#accord li').removeClass('active');
  $(this).closest('li').addClass('active');

  if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }

  if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#accord ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }

  if (checkElement.is('ul')) {
    return false;
  } else {
    return true;
  }
});

＆＃13;

<div id='accord'>
  <ul>
    <li class="active">
      <a href='javascript:void(0)'><span>Accordion</span></a>
      <ul style="display: block;">
        <div class="acc_cont">
          //text
        </div>
      </ul>
    </li>
    <li>
      <a href='javascript:void(0)'><span>Accordion</span></a>
      <ul style="display: block;">
        <div class="acc_cont">
          //text
        </div>
      </ul>
    </li>
  </ul>
</div>

<div id='accord'>
  <ul>
    <li class="active">
      <a href='javascript:void(0)'><span>Accordion</span></a>
      <ul style="display: block;">
        <div class="acc_cont">
          //text
        </div>
      </ul>
    </li>
    <li>
      <a href='javascript:void(0)'><span>Accordion</span></a>
      <ul style="display: block;">
        <div class="acc_cont">
          //text
        </div>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于重复的id属性，您的HTML无效。它们在文档中必须是唯一的。请改用类。另请注意，您应通过DOM遍历方法引用当前手风琴中的所有元素，以阻止一个手风琴中引发的任何事件影响页面上的任何其他实例。试试这个：

$('.accord > ul > li:has(ul)').addClass("has-sub");

$('.accord > ul > li > a').click(function() {
  var $accordion = $(this);
  var checkElement = $(this).next();

  $accordion.find('li').removeClass('active');
  $accordion.closest('li').addClass('active');

  if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $accordion.closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }

  if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $accordion.find('ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }

  if (checkElement.is('ul')) {
    return false;
  } else {
    return true;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='accord'>
  <ul>
    <li class="active">
      <a href='javascript:void(0)'><span>Accordion</span></a>
      <ul style="display: block;">
        <div class="acc_cont">
          //text
        </div>
      </ul>
    </li>
    <li>
      <a href='javascript:void(0)'><span>Accordion</span></a>
      <ul style="display: block;">
        <div class="acc_cont">
          //text
        </div>
      </ul>
    </li>
  </ul>
</div>

<div class='accord'>
  <ul>
    <li class="active">
      <a href='javascript:void(0)'><span>Accordion</span></a>
      <ul style="display: block;">
        <div class="acc_cont">
          //text
        </div>
      </ul>
    </li>
    <li>
      <a href='javascript:void(0)'><span>Accordion</span></a>
      <ul style="display: block;">
        <div class="acc_cont">
          //text
        </div>
      </ul>
    </li>
  </ul>
</div>

Answer 2

id应该是唯一的。您对两者都使用相同的ID。

Answer 3

您在单个页面上使用了重复ID，这就是您无法同时访问这两个ID的原因。请使用class而不是ID。

只需替换：

  

id =“accord”with class =“accord”   和   “#accord”与“.accord”