2016-03-28 12 views
1

私は他のulが切り替えられる間に開いておきたいulを持っています。ページのロード時に、HTMLは次のようになります。「アクティブ」https://jsfiddle.net/q9munmab/他のulのトグル中にulを開いたままにする方法

<div class="leftNav"> 
    <ul> 
     <li> 
      <div class="active">Test</div> 
      <ul class="navtoggle nonactive"> 
       <li><a></a></li> 
       <li><a></a></li> 
       <li><a class="current"></a></li> 
      </ul> 
      <div>Test 1</div> 
      <ul class="navtoggle nonactive"> 
       <li><a></a></li> 
       <li><a></a></li> 
       <li><a></a></li> 
      </ul> 
      <div>Test 2</div> 
      <ul class="navtoggle nonactive"> 
       <li><a></a></li> 
       <li><a></a></li> 
       <li><a></a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

クラスは、クラスは、「現在の」あなたが実際にあるページにあるときに、クリックした3つのリンクのどれによって異なります。私はトグルの複数のバリエーションを試しましたが、あなたが他の2つの間で切り替えることができますどのように(divクラス "アクティブ" ulと一緒にトグルした固体)を保持する方法を把握するように見えることができません。その後、liをクリックすると、ページが再び読み込まれ、最初からやり直します。

$('.navContainer li div').click(function() { 
    var $t = $(this); 
    var $next = $t.next('.navtoggle'); 
    var $back = $('.current:visible').closest('ul').prev(); 
    $(this).not('.leftNav li div.active').toggleClass('nonactive'); 
    $('.navtoggle').not($back).slideToggle(); 
}); 
+0

を確認してください。タイトル欄をクリックすると、対応する次のULが非表示または表示されるはずですか? – ameenulla0007

+0

何があなたの要件であることがわかりません!あなたの要件にいくつかの詳細を追加してください。 – ameenulla0007

+0

はいdivをクリックすると、次のulが切り替わるはずですが、liがクリックされてそのページがロードされるまでアクティブulは開いたままになります – Keith

答えて

1

ワーキングフィドル:私の情報を1としてhttps://jsfiddle.net/q9munmab/3/

、これはあなたのために働くことができます。ソリューションはnotセレクタで簡単です。ここであなたの使い方を説明します。

$(".navContainer ul>li>div:not(.active)").click(function() { 
    $(this).next().slideToggle(); 
}); 

UPDATED(他のULのを非表示にする)

作業フィドル:兄弟のhttps://jsfiddle.net/q9munmab/5/

さらに添加$(this).next().slideToggle().siblings("ul").hide();

使用を隠すために、他のULのを標的とします。

はフィドル作業(あなたが言うときに、他のdiv要素をクリックしたとき、何もアクティブULに起こりません)

UPDATED :https://jsfiddle.net/q9munmab/7/

$(".navContainer ul>li>div.active").next().show().addClass("no-effect"); 
$(".navContainer ul>li>div:not(.active)").click(function() { 
    $(this).next().slideToggle().siblings("ul:not(.no-effect)").hide(); 
}); 

が負荷に余分なクラス、アクティブにのみ効果を追加しましたdivのUL、およびnotセレクタを再度使用して、アクティブ部門およびULの活動を回避します。

+0

私は謝罪する、私は1つのCSSに追加していない、それはulのが表示されます:なし;開始するには、下のulを持つアクティブなdivだけli:と表示されます。現在のハイライト表示 – Keith

+0

私はあなたにもこれを伝えませんでしたが、トグルが開いてもう一方をクリックするとトグルします閉じる1 ulだけが開いています(ロードされたul以外) – Keith

+0

https://jsfiddle.net/q9munmab/4/更新 – Keith

関連する問題