單頁中的多個手風琴

我正嘗試在同一頁面中使用兩個或多個手風琴。所以現在第一個手風琴正在工作，但是第二個不起作用。單頁中的多個手風琴

我想知道錯過了多個事件。

這是我的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

單頁中的多個手風琴

回答

相關問題