0

順序付けされていないリストのドロップダウンメニューとして機能するコードがいくつかあります。表示と非表示はうまくいきますが、ネストされた子リストが存在する場合にクリックされる親要素にアクティブ状態を追加する方法を模索しています。以下のコードは、子があるかどうかに関係なく、クリックされたリンクにアクティブ状態を追加するようですが、私はそれを望んでいません。

たとえば、クリックされたときに「ニュース」にアクティブな状態を追加したいとします。

誰か助けてもらえますか？

私のjQuery：

$('.infobox.lightbox.inlinks ul > li > ul')
 .hide()
 .click(function(e){
   e.stopPropagation();
 });

 $('.infobox.lightbox.inlinks ul > li').toggle(function(){
   $(this).find('ul').slideDown(),
   $(this).addClass("expanded");
 }, function(){
   $(this).find('ul').slideUp(),
   $(this).removeClass("expanded");
 });

と私のHTML：

<ul>
    <li><a href="#">Press releases</a></li>
    <li><a href="#">In the news</a>
        <ul>
          <li><a href="#">Photo galleries</a></li>
          <li><a href="#">Videos</a></li>
          <li><a href="#">Podcasts</a></li>
        </ul>
    </li>
    <li><a href="#">Media Centre</a></li>
    <li><a href="#">Fact Sheet</a></li>
    <li><a href="#">Press Contacts</a></li>
</ul>
4

2 に答える 2

0

JQuery.toggle()は、関数間で「トグル」するのではなく、要素を非表示/表示するために使用されます。

このようなことをしたいこと（ただし、他にもたくさんの方法があります）：

JAVASCRIPT：

$('.infobox.lightbox.inlinks ul > li').click(function(e){
     if($(this).children('ul').length>0){
         e.preventDefault();
         if($(this).children('ul').is(':visible')){
           $(this).find('ul').slideUp(),
           $(this).removeClass("expanded");
         }else{
           $(this).find('ul').slideDown(),
           $(this).addClass("expanded"); 
         }
     }
 });

デモ：http：//jsfiddle.net/dirtyd77/aZBXc/6/

お役に立てれば！

于 2013-02-07T16:16:05.863 に答える
0

このhtmlを使用してください...

<div class="infobox lightbox inlinks">
    <ul>
        <li><a href="#">Press releases</a></li>
        <li><a href="#">In the news</a>
            <ul style="display:none;">
              <li><a href="#">Photo galleries</a></li>
              <li><a href="#">Videos</a></li>
              <li><a href="#">Podcasts</a></li>
            </ul>
        </li>
        <li><a href="#">Media Centre</a></li>
        <li><a href="#">Fact Sheet</a></li>
        <li><a href="#">Press Contacts</a></li>
    </ul>
</div>

そしてJS..。

$('.infobox.lightbox.inlinks ul > li').click(function(e){
    e.stopPropagation();
    $(this).find('ul').slideToggle(),
});

準備完了を使用しないでください... jQueryjQueryonイベントを使用してください...

このjSfiddleの例を参照してください

于 2013-02-07T16:27:34.013 に答える