複数ページのアコーディオン

Question

私は同じページに2つ以上のアコーディオンを使用しようとしています。だから最初のアコーデオンは動作していますが、2番目のアコーディオンは動作しません。

私は複数のイベントを逃したのだろうかと思っていました。

ここに私の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>

Answer 1

id属性が重複しているため、HTMLが無効です。それらはドキュメント内で一意でなければなりません。代わりにクラスを使用してください。また、現在のアコーディオン内のすべての要素をDOMトラバーサルメソッドで参照して、1つのアコーディオンで発生したイベントをページの他のインスタンスに影響を与えないようにする必要があります。これを試してください：あなたは両方にアクセスすることはできません理由は、単一のページ、上の重複IDを使用しました

$('.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クラスで= "アコード" = "アコード" と "#accordを" ".accord" と