0

divでアンカータグを選択したいのですが、ドロップダウンを作成しようとしているので、子のulタグから選択したいです。

私のHTMLコードは次のとおりです。

<div>
  <a href='#'>Dropper 1</a>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <a href='#'>Dropper 2</a>
  <ul>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

私のJQueryコードは以下の通りです：

$(document).ready(function(){
  $('ul').each(function(){
    $(this).parent().click(function(){ $('ul',this).show("1000"); });
    $(this).parent().mouseleave(function(){ $('ul',this).hide("1000"); });
  });
})

UL コードの CSS は次のとおりです。

ul {display:none;}

これで UL が非表示になり、UL を使用してアンカーを選択したいと考えています。上記の関数は、DIV を親として選択し、div をクリックすると ul が表示されるため、現在機能していますが、div のサイズはアンカー タグと同じサイズであるため、誰かが div をクリックすると、そのアンカーである子であり、アンカーをクリックすると、ブラウザーのデフォルトの動作は、href='#' のために一番上にスクロールすることです。event.preventDefault();を使用して、そのアンカーを選択してスクロールを停止したいと考えています。

UL経由でそのアンカータグを選択する方法を教えてください

4

1 に答える 1

0

これがあなたが望んでいたものだと思います：

$('ul').each(function() {
    $(this).prev('a').click(function(e) {
        e.preventDefault();
        $(this).next().show("1000");
    });
    $(this).mouseout(function() {
        $(this).hide("1000");
    });
});

http://jsfiddle.net/ghLCv/2/

于 2011-09-23T17:30:58.940 に答える