Question

在点击“阅读更多”链接时，我需要帮助关闭使用jquery扩展的div标记。

我可以让一个人上班但不是其他人。

我附上了我的代码的小提琴： http://jsfiddle.net/R9LvG/

这是我第一次使用jquery而且我是新手，所以请耐心等待。

$(document).ready(function () {
    $(".clickme").click(function () {
        $(".content").slideToggle("slow")
    });
});
$(document).ready(function () {
    $(".close").click(function () {
        $(".content").slideToggle("slow")
    });
});

$(document).ready(function () {
    $(".clickme2").click(function () {
        $(".content2").slideToggle("slow")
    });
});

$(document).ready(function () {
    $(".clickme3").click(function () {
        $(".content3").slideToggle("slow")
    });
});

$(document).ready(function () {
    $(".clickme4").click(function () {
        $(".content4").slideToggle("slow")
    });
});

$(document).ready(function () {
    $(".clickme5").click(function () {
        $(".content5").slideToggle("slow")
    });
});
$(document).ready(function () {
    $(".close").click(function () {
        $(".content").slideToggle("slow")
    });
})

Answer 1

由于所有这些代码都很糟糕，我会使用：

$(document).ready(function () {
  $('[class^="clickme"]').click(function (e) {
    e.preventDefault();
    $(this).next().slideToggle("slow");
  });
 });

更简单，更清洁。：）

Answer 2

$(document).ready(function () {
$(".clickme").click(function () {
    $(".content").slideToggle("slow")
 });
$(".clickme2").click(function () {
    $(".content2").slideToggle("slow")
});
$(".clickme3").click(function () {
    $(".content3").slideToggle("slow")
})
$(".clickme4").click(function () {
    $(".content4").slideToggle("slow")
});
$(".clickme5").click(function () {
    $(".content5").slideToggle("slow")
});
$(".close").click(function () {
    $(".content").slideToggle("slow")
});

});

JsFiddle

此外：

删除'＃'href以防止它在点击时跳到页面顶部

<a class="clickme"><u><b>Read more</b></u></a>

到你的clickme css课程：

.clickme{cursor:poniter}

然后添加悬停事件：

.clickme:hover{color:#F00}

Answer 3

你关闭它2次，这意味着它再次打开

最后删除

$(document).ready(function () {
  $(".close").click(function () {
    $(".content").slideToggle("slow")
  });
})

Answer 4

不要在一个页面中多次使用dom ready函数。

使用Multiselector进行点击功能

例如

$(document).ready(function () {
$("#selector1,#selector2, ... #selector-n").click(function () {
    $(".content").slideToggle("slow")
});

Answer 5

请只使用一个

$(document).ready(function () { 


$(".clickme2, .clickme3, .clickme4, .clickme5").click(function () {
    $(this).slideToggle("slow");


});

Answer 6

我没有在您的代码中发现任何问题。
您可以通过删除 href =“”元素来修改锚点选项卡，这样可以防止每次单击时将页面移到顶部< b>阅读更多。

<a class="clickme2" ><u><b>Read more</b></u></a>

通过在页面中复制以下内容，在您的页面中包含jQuery脚本，

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

您可以更新用于扩展和压缩的脚本，如下所示，因为您正在处理具有不同类的不同div，

<script>

$(document).ready(function () {
    $(".clickme").click(function () {
        $(".content").slideToggle("slow")
    });

    $(".close").click(function () {
        $(".content").slideToggle("slow")
    });
    $(".clickme2").click(function () {
        $(".content2").slideToggle("slow")
    });

    $(".clickme3").click(function () {
        $(".content3").slideToggle("slow")
    });

    $(".clickme4").click(function () {
        $(".content4").slideToggle("slow")
    });

    $(".clickme5").click(function () {
        $(".content5").slideToggle("slow")
    });

    $(".close").click(function () {
        $(".content").slideToggle("slow")
    });
})
</script>

关闭div标签中的链接

6 个答案: