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 に答える