クリックでサブメニューとサブサブメニューを開く

Question

JavaScriptはサブメニューではうまく機能しますが、サブメニューでは機能しません：「シーズン」をクリックするまで非表示にしてから親項目の下に表示されます。

HTML &のjavascript：

$('#main-menu > ul > li:has(.dropdown-menu)').addClass('sub').on('click', function(event) { 
 
    if ($(event.target).parents('ul.dropdown-menu').length > 0) { 
 
    event.stopPropagation(); 
 
    } else { 
 
    event.preventDefault(); 
 
    } 
 
    $(this).find('ul').slideToggle(); 
 
}); 
 

 
$('#main-menu > ul > ul > li:has(.dropdown-menu-2)').addClass('sub').on('click', function(event) { 
 
    if ($(event.target).parents('ul.dropdown-menu-2').length > 0) { 
 
    event.stopPropagation(); 
 
    } else { 
 
    event.preventDefault(); 
 
    } 
 
    $(this).find('ul').slideToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="main-menu"> 
 
    <ul> 
 
    <li><a href="http://piirissaareturism.ee/">Home</a> 
 
    </li> 
 
    <li><a href="http://piirissaareturism.ee/kasulik-info/">Information</a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="http://piirissaareturism.ee/kasulik-info/toitlustus">Season</a> 
 
      <ul class="dropdown-menu-2"> 
 
      <li><a href="http://piirissaareturism.ee/kasulik-info/toitlustus">Winter</a> 
 
      </li> 
 
      <li><a href="http://piirissaareturism.ee/kasulik-info/majutus">Spring</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="http://piirissaareturism.ee/kasulik-info/majutus">Food</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="http://piirissaareturism.ee/meist/">Contact</a> 
 
    </li> 
 
    </ul> 
 
</div>

は見てみましょうjsfiddle

UPDATE：共通quys、我々は我々が唯一見つける必要があり、ほとんどがある、なぜ.find('a') （LinkinTEDソリューションをご覧ください）は、「情報」と「季節」だけでなく、すべてのアンカーに影響を与えます。お願いします！

Answer 1

find('ul')を使用すると、すべてのリストがトリガーされます。

代わりにchildren('ul')を使用してください。

さらに、 'seasons'をクリックすると、第2レベルのサブメニューを開くのではなく、第1レベルのサブメニューが閉じます。クリックイベントをaにバインドして修正できます。

$('#main-menu > ul > li:has(.dropdown-menu)').addClass('sub').find('a').on('click', function(event) { 
    if ($(event.target).parents('ul.dropdown-menu').length > 0) { 
    event.stopPropagation(); 
    } else { 
    event.preventDefault(); 
    } 
    $(this).parent().children('ul').slideToggle(); 
}); 

$('#main-menu > ul > ul > li:has(.dropdown-menu-2)').addClass('sub').on('click', function(event) { 
    if ($(event.target).parents('ul.dropdown-menu-2').length > 0) { 
    event.stopPropagation(); 
    } else { 
    event.preventDefault(); 
    } 
    $(this).find('ul').slideToggle(); 
}); 

UPDATED FIDDLE

Answer 2

LinkinTEDコード内の小さなミスがあった - 彼は、同様に、コードの第二部に.find('a')を追加する必要があります

$('#main-menu > ul > li > ul > li:has(.dropdown-menu-2)').addClass('sub-sub').find('a').on('click', function(event).... 

は今それは完璧です！ありがとうございました！