单页中的多个手风琴

Question

I'm trying to use two or more accordion in same page. So right now the first accordion is working however the second doesn't work.

I was wondering missed multiple event.

Here is my html and js code. Any help highly appreciated.

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

Answer 1

Your HTML is invalid because of the duplicate id attributes. They must be unique within a document. Use classes instead. Also note that you should reference all elements within the current accordion through DOM traversal methods to stop any events raised in one accordion from affecting any other instance on the page. Try this:

 $('.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

The id should be unique. You are using same id for both.

Answer 3

You've used duplicate IDs on a single page, which is why you're not able to access both. Please use class instead of ID.

Just replace:

id="accord" with class="accord" and "#accord" with ".accord"