Question

目前我正在尝试在h3标记上添加鼠标单击事件监听器，当单击此标记时，它将滑动一个div。

这是我的HTML

<div class="gallery-wrapper">
                <h3 class="visible-toogle"> >> Hide gallery</h3>
                <div class="galleria">
                    <img src="../Images/spherefactor_001.png" data-title="Sphere factor image 1" data-description="Sphere factor">
                    <img src="../Images/spherefactor_002.png" data-title="Sphere factor image 2" data-description="Sphere factor">
                    <img src="../Images/spherefactor_003.png" data-title="Sphere factor image 3" data-description="Sphere factor">
                </div>
            </div>

这是我的javascript

    $( document ).ready(function() {
        $(".visible-toogle").click(function ()
        {
            var result = $(this).text();
            if(result == " >> Show gallery")
            {
                $(this).text(" >> Hide gallery");
            }
            else
            {
                $(this).text(" >> Show gallery");
            }

            $(this).closest(".galleria").slideToggle( "slow", function()
            {

            });
        });
    });

我做错了什么？

Answer 1

在jQuery中使用 next 可能会对您有所帮助

$(this).next("div").slideToggle("slow", function () { });

Answer 2

最近的必须是父母。你需要在那里使用兄弟姐妹。

Answer 3

首先使用＆＃34;而不是最接近：

$(this).first(".galleria").slideToggle("slow", function () {

jsfiddle

Answer 4

$(document).ready(function () {
    $(".visible-toogle").click(function () {
        var result = $(this).text();
        var hText = result.indexOf("Hide") > -1 ? ">> Show gallery" : ">> Hide gallery";
        $(this).text(hText);
        //slide toggle.
        $('.gallery-wrapper').find(".galleria").slideToggle(500, function () {

        });        
    });
});

<强> Fiddle Demo

使用jquery隐藏div但无法计算出以正确div为目标的逻辑

4 个答案: