1

それぞれの下にテキストが<ul>含まれる<h2>見出しがあります。それぞれの見出しをクリックして、下のテキストを表示または非表示にできるようにしたい。

<li>見出しがクリックされたときに、それぞれに個別のifステートメントを作成せずに、同じ内からのみテキストを表示するようにjqueryに指示するにはどうすればよい<li>ですか？

<ul>
    <li>
        <h2>heading</h2>
        <div id='step'>
            text text text
        </div>
    </li>
    <li>
        <h2>heading</h2>
        <div id='step'>
            text text text
        </div>
    </li>
</ul>

<script>
    $("li").click(function () {
        if ($("#step").is(":hidden")) {
            $("#step").slideDown("slow");
        } else {
            $("#step").slideUp("slow");
        }
    });
</script>
4

5 に答える 5

2

まず、ID が重複していますが、これは正しくありません。ID は一意である必要があるため、それらをクラスまたは他の識別子に置き換えます。

次に$(this)、クリックされた要素を参照するために使用します。

HTML

<ul>
 <li>
  <h2>heading</h2>
  <div class='step'>
   text text text
  </div>
 </li>
 <li>
  <h2>heading</h2>
  <div class='step'>
   text text text
  </div>
 </li>
</ul>

JavaScript

$("li").click(function () {
    $(this).children('.step').slideToggle('slow');
});​

JSFiddle: http://jsfiddle.net/JGZRN/

于 2012-11-13T11:02:37.207 に答える
0

問題は、idステップでdivをターゲットにしようとしているが、そのidで複数のdivがあるという事実にあります。divに異なるIDを使用する

次のように修正できます。

<ul>
 <li>
  <h2>heading</h2>
  <div>
   text text text
  </div>
 </li>
 <li>
  <h2>heading</h2>
  <div>
   text text text
  </div>
 </li>
</ul>​

とjs

$("li").click(function () {
    if ($(this).children('div').is(":hidden")) {
        $(this).children('div').slideDown("slow");
    } else {
        $(this).children('div').slideUp("slow");
    }
});​

この例では、liで1つのdivのみを使用していることを前提としていることに注意してください

于 2012-11-13T11:00:34.493 に答える
0

あなたはこれを行うことができます：

html:

<ul>
  <li>
   <h2>heading</h2>
     <div id='step'>
       text text text
     </div>
   </li>
   <li>
     <h2>heading</h2>
       <div id='step'>
         text text text
    </div>
   </li>
  </ul>​

js:

$('ul li h2').click(function() {
  $('#step').toggle('slow', function() {
   // Animation complete.
  });
});

ここにプレビューフィドルhttp://jsfiddle.net/wandarkaf/2Pnz7/

これがお役に立てば幸いです。</p>

于 2012-11-13T11:08:23.483 に答える
0

$(this) は、クリックされたリスト要素を参照し、その下の p タグと、現在の状態に応じて上下にスライドする「slideToggle」を「見つけ」ます。

<script>
    $(function(){
        $('li').click(function(){
            $(this).find('p').slideToggle();
        });
    });
</script>
<ul>
    <li>
        <h2>heading 1</h2>
        <p>Text text text</p>
    </li>
    <li>
        <h2>heading 2</h2>
        <p>Text text text</p>
    </li>
 </ul>
于 2012-11-13T11:02:06.317 に答える
0

id="step"div のbyを変更するclass="step"と、次のコードを使用できます。

$("li").click(function () {
     var div = $(this).find(".step");
     if (div.is(":hidden")) {
       div.slideDown("slow");
     } 
     else {
       div.slideUp("slow");
     }
});
于 2012-11-13T11:03:37.640 に答える