0

クラス nav-title を持つ要素にもアクティブなクラスがあるかどうかを確認したい場合は、nav-title クラスを持つ要素の下にある次の要素 (.sub-nav のクラスを持つ) を下にスライドさせます。

それ以外の場合、nav-title のクラスを持つ要素にアクティブなクラスがない場合は、.sub-nav のクラスを持つ最初の要素を見つけて表示し、上に移動して、アクティブなクラスを .nav-title に追加します。

オンクリック機能を備えた次のコードはうまく機能しますが、機能しないのは最初のコードだけです..htmlドキュメント自体でアクティブなクラスを追加しようとしましたが、最初の要素と2番目の要素の両方がクラスはアクティブで、サブ ナビゲーションはスライド ダウンしません。

$(document).ready(function() {
  if ($("#nav").find("nav-title").hasClass("active")) {
    $(this).next(".sub-nav").slideDown("fast");
  } else {
    $("#nav").find(".sub-nav:first").show().prev().addClass("active");
  }

  $("#nav").on("click", ".nav-title", function() {
    $('.active').removeClass("active").next(".sub-nav").stop().slideUp("fast");
    $(this).toggleClass("active");
    $(this).next(".sub-nav").stop().slideDown("fast");
  });
});

誰でも助けることができますか？

ちなみに、私のhtmlは次のようになります。

<ul id="nav">
  <li class="nav-title">Title 1</li>
  <ul class="sub-nav">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
  </ul>
  <li class="nav-title active">Title 2</li>
  <ul class="sub-nav">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
  </ul>
</ul>

私のコードは少し面倒かもしれません。話しながら jquery を学んでいるところです。

おっと！少し実例を作りました: http://fiddle.jshell.net/kcWA8/2/

4

2 に答える 2

0

私はジェームズ・モンターニュの答えを使用しました。うまくいきました。これを誤解しているよう(this)で、クラスの前にドットを忘れていました。

ありがとう！

于 2013-10-21T10:13:41.037 に答える