0

primary-nav 内に 4 つのリンクがあり、対応する slideDown 要素をアクティブにする必要があります。.patient > aリンクには、 、.doctor > a、.primary > aおよびという個別の親クラスがあり.locations > aます。

誰かがクリックしたとき、.patient > a私は ul.patient をターゲットとする ul にする必要があります。

私は実験のようなものですが、これは私がこれまでに持っているものです：

var $patientDrop = $('ul.patient');

$patientDrop.hide();
$('.patient > a').click(function() {
  if ($patientDrop.is(':visible')) {
      $patientDrop.slideUp(function() {
        $('.patient > a').removeClass('active');
      });
  }
  else {
    $patientDrop.slideUp(function() {
        $('.patient > a').removeClass('active');
    });
    $patientDrop.slideDown();
    $('.patient > a').addClass('active');
  }
});
$('body').click(function(event) {
if (!$(event.target).is('a')) {
  $patientDrop.slideUp(function() {
        $('.patient > a').removeClass('active');
  });
}
});

今、学習のためだけに変数を使用していますが、おそらくそれらはここで必要なものです。しかし、私の本当の質問は、これを最も効率的な方法で行う方法です。4 つのリンクとそれぞれに対応する UL で機能するようにするためだけに、このコードすべてを異なる変数で 4 回繰り返す必要はありません。

彼らが言う方法は、次の方法です。primary-nav a, get class of clicked a, find ul with this classそして、スクリプトの残りの部分を実行しますか？

jsFiddle: http://jsfiddle.net/DRZZr/

4

3 に答える 3

1

これを試して：

$("a").click(function() {
    var myClass = $(this).parent('li').attr("class");
    var $patientDrop = $('ul.' + myClass);
    alert(myClass);
    // Your code...
});

</p>

于 2012-12-05T19:33:27.387 に答える
1

アンカーがul.patient展開したい の中にないと仮定すると、rel属性などを使用して、ターゲットが何であるかを知ることができます。jquery ui は、データ ターゲットでこれを頻繁に行います。例については、私の更新された jsfiddle を参照してください。

編集: http://jsfiddle.net/DRZZr/7/新しい要求/要件が与えられた更新された JSFiddle スクリプト。

また、ターゲティングを容易にするためにいくつかの ID を追加しました。「静的」な要素の ID を使用しました。つまり、ID には実際の意味があり、一般的なスタイリングだけに使用されるわけではありません。

変更の要点は次のとおりです。

    $(document).ready(function () {
  $('#primary-nav li').click(function()
                                 {
                                     var $elem = $('#sliderareas > ul.' + $(this).attr('rel'));
                                     var $this = $(this);

                                     if($elem.is(':visible'))
                                     {
                                         $elem.slideUp(function() {
                                              $this.find('a').removeClass('active');
                                          });
                                     }
                                     else
                                     {
                                         $elem.slideUp(function() {
                                            $this.find('a').removeClass('active');
                                          });

                                        $elem.slideDown();
                                        $this.find('a').addClass('active');
                                     }

                                 });
});

すべての #sliderareas ul を非表示にしてから、relクリックされた li の に似たクラスの ul を表示します。li 内のアンカーに rel を配置するか、必要に応じてアンカーの href='#hash' を使用してからa、attr の onclick を使用してhref、id が に設定された #sliderareas ul を見つけることもできます$(this).attr('href')。その例が必要な場合は、別の jsfiddle 編集を行うことができます。

于 2012-12-05T19:31:39.467 に答える
0

親 ul にアクセスする必要がある場合は、jquery の親メソッドを使用できます。

$('.doctor  a').parent('ul')

親ulをターゲットにします。

于 2012-12-05T19:23:46.127 に答える