0

アイテムがクリックされると、子ULが表示を切り替えて表示されるアニメーションリストを作成しようとしています。ただし、問題は、ユーザーが新しく表示されたリスト内の子LIをクリックすると、リンクが新しいページに移動するのではなく、表示が再び切り替えられることです...

私のjQueryは...

//Product range expander
$('.product-range ul li a').click(function() {
  $(this).parents("li").find("ul").toggle('slow')
  return false;
});

マークアップ...

<ul>
<li>
   <a href="#">United Kingdom</a>
       <ul style="display: none;">
           <li><a href="page1.html">Product</a></li>
           <li><a href="page2.html">Product</a></li>
           <li><a href="page3.html">Page</a></li>
        </ul>
</li>
</ul>
4

4 に答える 4

2

直接の子孫のみを選択する CSS2子セレクターを使用して、最初のアンカーのみを対象とするようにセレクターを変更します。

$('.product-range > ul > li > a').click(function(e) {
  $(this).parents("li").find("ul").toggle('slow')
  return false;
});

現在のセレクターは、深さに関係なく、タグ内にネストされているタグ内aにネストされているすべてのタグに関数を適用します。liul

ここでの実例: http://jsfiddle.net/P9k9w/9/

于 2012-10-12T10:51:26.160 に答える
0

属性セレクターを使用:

$('.product-range ul li a[href="#"]').click(function() {
  $(this).parents("li").find("ul").toggle('slow')
  return false;
});

または、サブリストのみを切り替えるリンクとアンカーである別のクラスをアンカーに追加します。

$('.product-range ul li a.handle').click(function() {
  $(this).parents("li").find("ul").toggle('slow')
  return false;
});

<ul>
<li>
   <a href="#" class="handle">United Kingdom</a>
       <ul style="display: none;">
           <li><a href="page1.html" class="truelink">Product</a></li>
           <li><a href="page2.html" class="truelink">Product</a></li>
           <li><a href="page3.html" class="truelink">Page</a></li>
        </ul>
</li>
</ul>
于 2012-10-12T10:47:45.263 に答える
0

代わりにこのセレクターを試してください

$('.product-range > ul > li > a').click(function() {

そのため、クリック ハンドラーを、アウターの直接の子であるアンカー要素のみにバインドします。ul li

于 2012-10-12T10:46:01.450 に答える
0

これをコードに追加してみてください：

$('.product-range ul li a').click(function() {
var parent_ul = $(this).parents("li").find("ul")

  if(parent_ul.is(':visible')) { // if vizible, go to link
    return true
  } else { // if hidden, show
    parent_ul.toggle('slow')
    return false;
  }
}

または、ul にクラスを追加して、選択したクラスを確認できるようにします。

于 2012-10-12T10:50:31.583 に答える