0

複数の lis を持つ div があり、各 li には ul が含まれています。各liを個別に切り替えたい。リンクをクリックすると、そのグループの ul のみが切り替わるはずです。以下のコードが私の言葉以上のものをクリアしてくれることを願っています。

<div id="sortable" style='width:700px; margin: 0 auto; border:2px solid; border-color:grey;'>
 <li class="ui-state-default"><a href='#' id='expand'> Group 1</a>
    <ul style= 'display:none' class='patents' id="sortable">
        <li id ='1' class="ui-state-default">Item 1</li>
        <li id ='2' class="ui-state-default">Item 2</li>
        <li id ='3' class="ui-state-default">Item 3</li>
    </ul>
 </li>
 <li class="ui-state-default"><a href='#' id='expand'> Group 2</a>
    <ul style= 'display:none' class='patents' id="sortable">
        <li id ='4' class="ui-state-default">Item 4</li>
        <li id ='5' class="ui-state-default">Item 5</li>
        <li id ='6' class="ui-state-default">Item 6</li>
    </ul>
</li>

スクリプトは

 <script>
  $(document).ready(function() {
    $('#expand').click(function() {
        $('.patents').toggle('slow', function() {
                    //instead of patents i need something unique 
        });
    });
});
</script>

グループ 1 をクリックすると、アイテム 1,2,3 がトグルし、group2 をクリックすると、アイテム 4,5,6 がトグルするはずです。

ありがとう

4

4 に答える 4

1

トップレベルに id="expand" の代わりに class="expand" を配置する必要があります

  • （とにかくIDを繰り返すべきではありません）。

    次に、クラス セレクター "." を使用します。ID「#」の代わりに、クリックした要素の子である「.patents」のみを選択します

       $(document).ready(function() {
    $('.expand').click(function() {
         $(this).next().toggle('slow', function() {
                    //instead of patents i need something unique
        });
    });
});
    • 于 2012-06-26T15:03:00.523 に答える
    0

    ここ: http://jsfiddle.net/zeS8u/

    HTML

    <ul>
    <li><a href="#" class="clickme">Click me!</a>
        <ul>
            <li>Cat</li>
            <li>Dog</li>
            <li>Mouse</li>
        </ul>
    </li>

    <li><a href="#" class="clickme">Click me too!</a>
        <ul>
            <li>Zebra</li>
            <li>Lion</li>
            <li>Snow Yeti</li>
        </ul>
    </li>
</ul>​

    Javascript:

    $("a.clickme").bind("click", function(e) {
   $(this).next("ul").toggle(); 
    return false;
});​
    于 2012-06-26T15:04:02.290 に答える
    0

    id 属性は一意であるため、次のクラスに変更する必要があります。

    例えば：

    <li class="ui-state-default"><a href='#' class='expand'> Group 2</a>

    次に、これを行います：

    $(document).ready(function() {
  $('.expand').each(function(){
    ($this).click(function() {
      var patents = $(this).next();
      $(patents).toggle(function() {
        $(this).hide();
      },
      function(){
        $(this).show();
      });
  });
});
    于 2012-06-26T15:04:15.207 に答える
    0

    基本的に、$('.patents') を呼び出すと、ページ上のすべてのクラスが取得されます。代わりに、クリックした要素から開始する必要があります。クリック関数内では、$(this) は現在の要素を参照します。その後、find メソッドを使用して、クリックした要素の子孫を見つけることができます。

    $('.patents') を $(this).find('.patents') に置き換えれば、準備完了です。

    また、いくつかのマイナーなハウスキーピング アイテム:

    1. id='expand' の代わりに、おそらく class='expand' を使用し、'#expand' の代わりに '.expand' を参照するようにスクリプトを変更する必要があります。
    2. ul タグを囲まずに最上位の li タグを使用するべきではありません。<ul> タグを囲まずに <li> を使用するのは危険ですか? を参照してください。.
    于 2012-06-26T15:01:22.780 に答える