Question

我对HTML和CSS非常熟悉，但对Javascript和jQuery不熟悉。 我试图弄清楚如何在一个事件（.click）中出现多个jQuery效果。

我有一个有很多文字的DIV（.bio-description）。我使.bio-description DIV高度仅为50px并将溢出设置为隐藏。当有人点击.bio-readmore DIV时，我希望发生以下情况：1）.bio-description DIV的高度设置为'auto'（所以所有文本现在都可见），2）.bio-readmore DIV消失，3）.bio-readless DIV出现。

我在jQuery.com上阅读了很多内容，并在Google上进行了大量搜索。我可能已经遇到了答案，但还没有理解如何实现它。

以下是我到目前为止的代码。 .bio-readmore在单击时会隐藏，但其他两个操作不会发生。除了.height之外，我还尝试过不同的效果，比如.css，.addClass和.animate。然而，没有任何作用，我认为它必须与我试图用一个事件处理多个效果的方式有关。

感谢您提供任何帮助！

-Mark

<script>
$(document).ready(function(){

    $(".bio-readmore").click(function() {
            $(".bio-description").height("auto");
        }, function () {
            $(".bio-readmore").hide();
        }, function () {
            $(".bio-readless").show();
        });

});

</script>

<style type="text/css">

#wrapper {width:600px; margin:0 auto;}

.bio-description {background:#CCCCCC; padding:10px; height:50px; overflow:hidden;}

.bio-readmore {float:right; margin-right:40px; background:#66CC66; padding:3px;}

.bio-readless {display:none; float:right; margin-right:40px; background:#FF3333; padding:3px;}

</style>


</head>

<body>

    <div id="wrapper">

        <div class="bio-description">

            <p>Morbi ut tincidunt magna. Ut justo eros, gravida a interdum eget, molestie eget nibh. Morbi sed mauris lectus, id tincidunt lectus. Sed gravida consectetur enim sit amet sodales. Proin ligula metus, lobortis nec commodo rutrum, tincidunt sit amet turpis. Nullam condimentum urna nec libero fermentum non tristique dolor pulvinar. Cras tortor nisi, convallis a laoreet sit amet, bibendum sed nunc. Cras quam enim, mollis non hendrerit sit amet, ullamcorper quis libero.</p>

        </div>

        <div class="bio-readmore">Read More &#9660;</div>

        <div class="bio-readless">Read Less &#9650;</div>

    </div>

</body>

Answer 1

您可以在点击事件（多行）上运行整个功能：

$(".bio-readmore").click(function() {
            $(".bio-description").height("auto");
            $(".bio-readmore").hide();
            $(".bio-readless").show();
        });

aaaaaa你已经完成了！我喜欢JQuery。

Answer 2

将它全部放在一个功能中：

    $(".bio-readmore").click(function() {
        var $this = $(this);
        var wrapper = $this.closest(".wrapper");
        wrapper.children(".bio-description").height("auto");
        $this.hide();
        wrapper.children(".bio-readless").show();
    });

根据Felix的评论，我使这个功能稍微高效一点。如果您的文档中有多个div.wrapper，则也需要它。

Answer 3

也许我错过了一些东西，但你不能只是在程序上执行这些行吗？（那是一个字吗？）

    $(".bio-readmore").click(function() {
        $(".bio-description").height("auto");
        $(".bio-readmore").hide();
        $(".bio-readless").show();
    });

Answer 4

有没有理由你不只是在一个函数调用中进行所有三个操作？

$(document).ready(function(){
    $(".bio-readmore").click(function() {
        $(".bio-description").height("auto");
        $(".bio-readmore").hide();
        $(".bio-readless").show();
    });
});

Answer 5

只需像在函数中一样执行所有函数：

$(".bio-readmore").click(function() {
    $(".bio-description").height("auto");
    $(".bio-readmore").hide();
    $(".bio-readless").show();
});

Answer 6

听起来你想在这种情况下使用.animate（{...}）：

http://api.jquery.com/animate/

您可以使用Json字符串提供您想要点击动画的所有更改的列表。

一个.click的多个jQuery效果

6 个答案: