0

一部のコンテンツにアコーディオン スタイルのボックスを実装しようとしています。ただし、これらのボックスは 1 つのテンプレートに 4 ～ 6 個あり、明らかな理由からすべてが異なるクラスになっています。ただし、コードをできるだけ読みやすくしたいと考えており、クラス名ごとにコードを複製したくありません。私はjQuerys（この）メソッドが機能すると仮定していますが、それをどのように使用するかは100％確信が持てません。

これが私のJSコードです：

        <script type="text/javascript">
    $(document).ready(function(){
        $(".block-50_hoverHeader").click(function (){
           //alert("clicked");
            $(".scrollText").slideToggle(1000);

        });

        });


</script>

したがって、.scrollText クラスは、onClick 関数の後に表示する必要があるすべてのコンテンツを保持する div です。しかし、現在、ヘッダーをクリックすると、すべての .scollText div がページに表示されます。だから私はそれがクリックされている親ヘッダー div にのみ表示されるようにします。

ここにHTML：

<div class="block-50 left textHoverWrapOne">
    <img src="" alt="" /> (Image working as BG Image)
    <div class="block-50_hoverHeader"><p>This is a header!</p></div>
    <div class="block-50_textHoverOne trans_click scrollText">
        This is the content that needs to be displayed after the 
    </div>
</div>
4

3 に答える 3

3

scrollTextクリックされたblock-50_hoverHeader要素に関連するを見つけます。この場合、それは次の兄弟であるため、.next() を使用できます。

イベントハンドラー内thisでは、ハンドラーが登録されている要素を指しています。この場合は要素であるため、次を使用しblock-50_hoverHeaderて次を見つけることができますscrollText$(this).next()

jQuery(function ($) {
    $(".block-50_hoverHeader").click(function () {
        $(this).next().slideToggle(1000);
    });
});

デモ:フィドル

于 2013-08-28T15:19:50.523 に答える
0

これを実現するには、いくつかの方法があります。私は、共有された親を取得してから使用することを好みfindます。これは、html 構造へのマイナーな変更により壊れる可能性が少し低いことがわかったからです。

$(".block-50_hoverHeader").click(function (){

    $(this).closest(".textHoverWrapOne").find(".scrollText").slideToggle(1000);

});
于 2013-08-28T15:23:22.513 に答える
0

div全体をターゲットにしないのはなぜですか??

jQuery(function ($) {
    $(".block-50").click(function () {
        $(this).find('.scrollText').slideToggle(1000);
    });
});
于 2013-08-28T15:24:01.010 に答える