0

誰かが私が間違っていることを教えてください。私は持っている：

//My HTML
    <div>
      <ul>
         <li id="test"><a href="#">Main Item 1</a></li>
            <ul class="list-in-list">
               <li><a href="#">Item 1</a></li>
               <li><a href="#">Item 2</a></li>
               <li><a href="#">Item 3</a></li>
            </ul>
         <li><a href="#">Main Item 2</a></li>
         <li><a href="#">Main Item 3</a></li>
      </ul>
    </div>

//My CSS
    .list-in-list {
    display:none;
    }

//My jQuery

   $(document).ready(function() {

         $('#test').click(function() {
           alert("hello");
           });
    });

私の最終的な目標は、リスト項目を押してもコンテンツが表示されず、きれいに展開されることを示すことです。ただし、その alert() がまったく表示されないようです。メイン リストのすべてのリスト項目に ID を使用する必要がありますか、それともクラスで十分ですか?

/W

4

5 に答える 5

2

.next 関数を追加して、ユーザーが任意の通貨でクリックしたときに次の ul を表示できます。メインliのすべてのクリックで有効にするには、id testを1つのクラス名に変更する必要があります

HTMLは次のようになります

 <div>
  <ul>
     <li class="main"><a href="#">Main Item 1</a></li>
        <ul class="list-in-list">
           <li><a href="#">Item 1</a></li>
           <li><a href="#">Item 2</a></li>
           <li><a href="#">Item 3</a></li>
        </ul>
     <li class="main" ><a href="#">Main Item 2</a></li>

      <ul class="list-in-list">
           <li><a href="#">Item 1</a></li>
           <li><a href="#">Item 2</a></li>
           <li><a href="#">Item 3</a></li>
        </ul>
     <li class="main"><a href="#">Main Item 3</a></li>

      <ul class="list-in-list">
           <li><a href="#">Item 1</a></li>
           <li><a href="#">Item 2</a></li>
           <li><a href="#">Item 3</a></li>
        </ul>
  </ul>
</div>

そしてJQuery関数は以下です

    $(document).ready(function() {

     $('.main').click(function() {                
         $(this).next(".list-in-list").slideToggle();             
       });
});

詳細については、リンクを確認できます

于 2013-03-28T10:23:33.867 に答える
1

あなたのコードは正常に動作します。あなたのページに Jquery が含まれていないと思います。または、Jquery へのパスが有効でない可能性があります。ネットワーク タブをチェックして、jquery の取得中に http エラーが発生するかどうかを確認します。

次のようにして、隠れた li を表示できます。

$(document).ready(function() {
    $('#test').click(function(e) {
        $(this).find('.list-in-list').show();
    });
});

あなたのコードは正常に動作します:

デモ

この場合、ID はページ上で一意でなければならないため、クラスは ID よりも優れています。外側の li 要素にクラスを追加することで、以下のデモのようなクラスを使用できます。バインドを#testから、li 要素に与えるクラスに変更するだけです。

$('.clickAbleLi').click(function(e) {
   $(this).find('.list-in-list').show();
});

デモ

于 2013-03-28T10:22:22.220 に答える
1

メイン リストのすべてのリスト項目に ID を使用する必要がありますか、それともクラスで十分ですか?

ID は一意です。同一の ID が複数ある場合、JavaScript コードは正しく機能しません。同様の属性をすべてのリスト アイテムに追加することを計画している場合は、この場合はクラスを使用します (そして、.代わりに で参照します#)。この場合、次を使用してクリック関数を呼び出します。

$('li.myClass').click(...);

ただし、リストが 1 つしかない場合は、単に ID を に追加してul、クリック機能を次のように使用できます。

$('ul#myId > li').click(...);

この場合、クラスを使用するとわずかに速くなることに注意してください。

次に、次を使用して内部 を参照します。ul

$('li.myClass > ul.list-in-list');

または、上記のどれを使用したかによって、次のようになります。

$('ul#myId > li > ul.list-in-list');

(>ここでは、直接の子のみを選択するために使用します。使用した場合は、内部に属する要素ul#myId liも選択することになります)li ul

于 2013-03-28T10:22:42.863 に答える
0

</li>「list-in-list」の前にタグを閉じます。</li>内部リストの後にタグを閉じる必要があります;) このように:

<div>
  <ul>
     <li id="test"><a href="#">Main Item 1</a>
        <ul class="list-in-list">
           <li><a href="#">Item 1</a></li>
           <li><a href="#">Item 2</a></li>
           <li><a href="#">Item 3</a></li>
        </ul>
     </li>
     <li><a href="#">Main Item 2</a></li>
     <li><a href="#">Main Item 3</a></li>
  </ul>
</div>
于 2013-03-28T10:25:58.440 に答える
-1

動作するはずですが、問題が発生した場合は、ID 属性を LI ではなく A に移動してみてください

于 2013-03-28T10:16:52.547 に答える