1

タイトルによって切り替わる4つのdivがあります（以下に示すように、1つのセットを示しました）。各タイトルリンククラスは、テキストフィールドクラスの前のクラスと一致します。javasciptを4回別々に作成する代わりに、$ thisを使用して現在のクラスをターゲットにし、次に現在のクラスをクラステキストとして使用して、ドライヤーを作成したいと考えていました。

important_info_headerクラスは、各divの動的クラスになります。

この種の文章ではそれほど素晴らしいものではないので、どんな助けでも大歓迎です

失敗した試み

 $(this).click(function() {
    $(this+'.text').slideToggle('slow', function() {
     //ani complete.

    });
  });

作業マークアップ

HTMLスタート

    <h4><a href="javascript:void(0)"  class="important_info_header"><%= t("catalog_items.show_lot.important_info_header")%></a></h4>
          <div class="important_info_header text">
              <p><%= t("catalog_items.show_lot.important_info") %></p>
          </div><!-- /text -->


 <h4><a href="javascript:void(0)"  class="important_info_header"><%= t("catalog_items.show_lot.important_info_header")%></a></h4>
          <div class="important_info_header text">
              <p><%= t("catalog_items.show_lot.important_info") %></p>
          </div><!-- /text -->



 <h4><a href="javascript:void(0)"  class="rules"><%= t("catalog_items.show_lot.important_info_header")%></a></h4>
          <div class="rules text">
              <p><%= t("catalog_items.show_lot.important_info") %></p>
          </div><!-- /text -->


 <h4><a href="javascript:void(0)"  class="shipping"><%= t("catalog_items.show_lot.important_info_header")%></a></h4>
          <div class="shipping text">
              <p><%= t("catalog_items.show_lot.important_info") %></p>
          </div><!-- /text -->

HTML END

    $('.important_info_header').click(function() {
    $('.important_info_header.text').slideToggle('slow', function() {
     //ani complete.

    });
  });
4

3 に答える 3

0

ここに例があります>>>フィドル

4 つのメイン リンクに「折りたたみ可能」の効果を持つクラスを追加します。

<a href='' class="important_info_header collapsable"> //link 1
<a href='' class="rules collapsable"> //link 2
<a href='' class="shipping collapsable"> //link 3
 ....and so on

すぐ後に続く div は、切り替えたいものでなければなりません。

次に、ユニバーサルクリック関数は次のようになります（ e.preventDefault() に注意してください。リンクで javascript:void() の代わりにこれを使用してください..

$('.collapsable').click(function(e) {
    e.preventDefault();
    $(this).next().slideToggle( function() { //ani complete.
    });
});
于 2012-11-15T04:05:20.137 に答える
0

これはどう？

$("h4 a").click(function() {
   $("div." + $(this).attr("class") ).slideToggle('slow', function() {
      // function..
   });
});

HTML を再構成できる場合、これも非常にうまく機能することがわかりました

HTML

<a href="#sec1" class="expandable">Go to Sec1</a>
<a href="#sec2" class="expandable">Go to Sec2</a>
<a href="#sec3" class="expandable">Go to Sec3</a>

<div id="sec1">Sec 1 content</div>
<div id="sec2">Sec 2 content</div>
<div id="sec3">Sec 3 content</div>

jQuery

$(".expandable").click(function(){
    $( $(this).attr("href") ).slideToggle("slow");
    // add callback/etc as needed
});

CSS id セレクターが必要とするがhref含まれているため、うまく機能します。#このように、ユーザーが JS を有効にしていない場合でも、link#sec1 はページ上のその id タグまでページをスクロールします。

于 2012-11-15T04:50:39.817 に答える
0

セレクターでクラスを取得する必要があります。

  $(($this).attr('class')+'.text').slideToggle('slow', function() {
     //ani complete.

    });
于 2012-11-15T04:03:02.243 に答える