Question

如果我们点击一个包含子项的列表，我想要这样，子项ul（子菜单）会显示出来。标准菜单 - 我们看到的子菜单系统。我尝试了一个无效的代码。你可能有更好的主意吗？

<div class="menu">
  <ul>
    <li class="page_item page-item-2"><a href="/accueil/">Accueil</a></li>
    <li class="page_item page-item-8"><a href="/disciplines/">Disciplines</a>
      <ul class='children'>
        <li class="page_item page-item-19"><a href="/disciplines/galerie/">Galerie</a></li>
        <li class="page_item page-item-21"><a href="/disciplines/definitions/">Définitions</a></li>
      </ul>
    </li>
    <li class="page_item page-item-10"><a href="/professeurs/">Professeurs</a></li>
    <li class="page_item page-item-11"><a href="/planning/">Planning</a></li>
    <li class="page_item page-item-12"><a href="/tarifs/">Tarifs</a>
      <ul class='children'>
        <li class="page_item page-item-23"><a href="/tarifs/cours/">Cours</a></li>
        <li class="page_item page-item-25"><a href="/tarifs/location/">Location</a></li>
      </ul>
    </li>
    <li class="page_item page-item-13"><a href="/contact/">Contact</a></li>
  </ul>
</div>


jQuery(document).ready(function() {
    jQuery('.menu').find('> li').click(function() {
        jQuery('.menu > li').not(this).find('ul').slideUp();
        jQuery(this).find('ul').stop(true, true).slideToggle(300);
        return false;
    }); 
})

Answer 1

你去.. ..

你将类.menu分配给错误的元素，将它分配给主ul，现在你可以相应地设置样式..

<强> HTML

  <ul class="menu">
    <li class="page_item page-item-2"><a href="#">Accueil</a></li>
    <li class="page_item page-item-8 current_page_item"><a href="#">Disciplines</a>
  <ul class='children'>
    <li class="page_item page-item-19"><a href="/disciplines/galerie/">Galerie</a></li>
    <li class="page_item page-item-21"><a href="/disciplines/definitions/">Définitions</a></li>
  </ul>
</li>
<li class="page_item page-item-10"><a href="/professeurs/">Professeurs</a></li>
<li class="page_item page-item-11"><a href="/planning/">Planning</a></li>
<li class="page_item page-item-12"><a href="/tarifs/">Tarifs</a>
  <ul class='children'>
    <li class="page_item page-item-23"><a href="/tarifs/cours/">Cours</a></li>
    <li class="page_item page-item-25"><a href="/tarifs/location/">Location</a></li>
  </ul>
</li>
<li class="page_item page-item-13"><a href="/contact/">Contact</a></li>

<强> JS

$('.menu').find('> li').click(function() {
$('.menu > li').not(this).find('ul').slideUp();
$(this).find('ul').stop(true, true).slideToggle(400);
return false;
});

Answer 2

尝试将您的JQuery中的选择器从jQuery('.menu').find('> li')和jQuery('.menu > li')更改为jQuery('.menu').find('> ul > li')和jQuery('.menu > ul > li')。

据我所知，>选择器选择Direct子后代，即在这种情况下为ul，因此li不是div.menu元素的Direct子后代。

点击，打开子菜单打开子菜单

2 个答案: