0

私はいくつかのjQueryを機能させようとしていますが、この質問で見つけた情報に基づいて解決策に近づいていることを知っています(まあ、考えてください) 。

基本的に私が望むのは、クリックするとアイコンを切り替え、ID 値に基づいて特定の DIV を表示する複数のプラス/マイナス アイコンをページに表示することです。

以下の例を見ると、DIV のコンテンツはアイコンがクリックされるまで非表示になっています。クリックすると、プラス アイコンがマイナス アイコンに変わります。マイナス アイコンをクリックすると、コンテンツは再び非表示になります。複数の DIV を同時に表示できるようにする必要があるため、各トグルが独立しているように見えます。

[...「すべて表示/非表示」リンクがあれば最高です!]

<div><a href="#" id="content1">[Plus Icon]</a> Content Title</div>
<div id="content1">This is some content. Really exciting content!</div>

<div><a href="#" id="content2">[Plus Icon]</a> Different Content</div>
<div id="content2">Here is more content. This content is less exciting.</div>

注: 上記の例では、表示される div はリンクのすぐ下にありますが、常にそうであるとは限りません。トグル リンクが別の場所にある場合があります。

ご覧のとおり、非表示にする DIV に対応するトグル リンクで ID を指定できるようにしたいと考えています。

そして、表示/非表示がスライド効果でアニメーション化できれば、それは良いことです.

私が見つけた他の質問から得た2つのスクリプトは、1つのDIVにのみ関連し、説明しているIDタイプシステムを持っていないことを除いて、私が望むほとんどのことを行います.

スクリプトのクレジット: Vytautas Butkus

フィドル

$(document).ready(function(){


  $(".slidingDiv").hide();

    $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
      var isShow = $(this).text() == 'Show';
      $(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'});
    });

});

.show_hide{
  background:url(http://img37.imageshack.us/img37/1127/plusminus.png) no-repeat;
  padding-left:20px;  
}

<a href="#" class="show_hide">Show</a>

<div class="slidingDiv" style="display: block;">
Check out
</div>

スクリプトのクレジット: roXon

フィドル

注: 彼のスクリプトはテキストも切り替えますが、これはあまり望ましくありません。

$(document).ready(function(){


  $(".slidingDiv").hide();

    $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
      var isShow = $(this).text() == 'Show';
      $(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'});
    });

});

.show_hide{
  background:url(http://img37.imageshack.us/img37/1127/plusminus.png) no-repeat;
  padding-left:20px;  
}

<a href="#" class="show_hide">Show</a>

<div class="slidingDiv" style="display: block;">
Check out
</div>

ご協力いただきありがとうございます。いつものように、それは大歓迎です！

4

2 に答える 2

1

私が正しく理解している場合、あなたが探しているのは、特定のボタンに対して表示/非表示にする特定の div を指定する方法です。この実装は、表示および非表示にする div の作成方法によって異なる場合がありますが、考えられる解決策の 1 つを次に示します。

表示/非表示ボタンで、属性を追加します。それが何であれ、私はそれをtargetElement何かと呼ぶかもしれません。だからあなたはで終わるでしょう<a targetElement="content1" href="#" id="content1">[Plus Icon]</a>。

次に、クリック イベント ハンドラーをこの要素にアタッチするときに、イベントを渡します。ということでこんな感じに～('.show_hide').click(function(event){。次に、ハンドラー関数内で、このようにターゲット div の名前を取得し、次のvar target_id = $(event.target).attr("targetElement")ように直接表示/非表示にできます-#(("#" + target_id)).show();

繰り返しますが、これをどのように行うかは、正確なセットアップと実装によって異なる場合があります-これは非常に具体的な質問です-しかし、うまくいけば、このソリューションが機能するか、少なくともデータをイベントハンドラ。

于 2013-04-17T15:20:27.477 に答える