单页中的多个手风琴

我正尝试在同一页面中使用两个或多个手风琴。所以现在第一个手风琴正在工作，但是第二个不起作用。单页中的多个手风琴

我想知道错过了多个事件。

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

$('#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; 
 
    } 
 
});

<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>

来源

2016-08-03 Gold Pearl

你的HTML是因为重复的'无效id'属性。它们在文档中必须是唯一的。使用类代替 –

无论如何设置增量在Jquery –

增量ID或类是反模式。我为你添加了一个答案，所以你可以看到如何解决这个问题。 –

由于重复的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>

来源

2016-08-03 09:13:52

谢谢。作品 –

-1

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

来源

2016-08-03 09:12:21

-2

你已经使用了单页，这就是为什么你不能访问上都重复的ID。请使用班级而不是ID。

只需更换：

ID = “协议” 带class = “雅阁” 和 “#accord” 与 “.accord”

来源

2016-08-03 09:14:34

单页中的多个手风琴

回答

相关问题