2

我希望如果我们单击一个包含子项的列表，子项 ul（子菜单）就会显示出来。标准菜单 - 我们看到的子菜单系统。我尝试了一个不起作用的代码。可能你有更好的主意？

http://jsfiddle.net/JeremyCh/BjTYY/2/

<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;
    }); 
})
4

2 回答 2

3

给你。。

您将类分配.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;
});
于 2013-03-16T15:09:30.853 回答
0

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

据我所知，>选择器选择直接子后代，即在本例中为 ul，因此 li 不是 div.menu 元素的直接子后代。

于 2013-03-16T15:08:04.430 回答