0

ポートフォリオ ページにはいくつかの flexslider があり、それぞれが異なるプロジェクトをスライドしています。

.flexslider にカーソルを合わせるかクリックすると、クラス .captions が上にスライドします。

その現在の .flexslider にカーソルを合わせると、その flexslider だけが .captions を上にスライドさせるようにするにはどうすればよいですか。現在、1 つの .flexslider にカーソルを合わせると、すべての flexslider の .captions が上にスライドします。これは理にかなっていますが、このクラスだけではどう言えばいいのかわかりません。うまくいきませんが、頭の中で次のようなものだと思います。

$("this").find(".caption" ).slideToggle( "1000", "linear" );

これが私が現在持っているものです：

var hoverOrClick = function () {
            $(".caption" ).slideToggle( "1000", "linear" );
        }

        $('.overlay').click(hoverOrClick).hover(hoverOrClick);

ありがとう！

編集: .overlay は .flexslider と同じです

編集 2: 関連する HTML

<div class="flexslider">
                <div class="overlay"></div>
                <div class="caption">Hey yo this is a caption.</div>
                <ul class="slides">
                    <li><img src="images/wrightspread.jpg" alt="Science Museum Brochure"></li>
                    <li><img src="images/wrightspread2.jpg" alt="Science Museum Brochure"></li>
                    <li><img src="images/wrightspread3.jpg" alt="Science Museum Brochure"></li>
                </ul>
            </div>
4

1 に答える 1

1

captionは の次の slibling であるため、.next()overlayを使用する必要があります。

    var hoverOrClick = function () {
        $(this).next(".caption" ).slideToggle( "1000", "linear" );
    }
于 2013-10-16T03:51:43.973 に答える