一次单击即可实现多种 jQuery 效果
我非常熟悉 HTML 和 CSS，但对 Javascript 和 jQuery 很陌生。 我正在尝试弄清楚如何让一个事件 (.click) 发生多个 jQuery 效果。
我有一个包含大量文本的 DIV (.bio-description)。我已将 .bio-description DIV 高度设为 50px，并将溢出设置为隐藏。当有人点击 .bio-readmore DIV 时，我希望发生以下情况：1）.bio-description DIV 的高度设置为“自动”（因此所有文本现在都可见），2）.bio-readmore DIV 消失，以及 3) .bio-readless DIV 出现。
我在 jQuery.com 上阅读了大量内容，并在 Google 上进行了大量搜索。我可能已经找到了答案，但只是不明白如何实现它。
下面是我到目前为止的代码。单击时 .bio-readmore 确实会隐藏，但其他两个操作不会发生。我还尝试了 .height 之外的不同效果，例如 .css、.addClass 和 .animate。然而，没有任何效果，我认为这一定与我试图处理一个事件的多种效果有关。
感谢您提供的任何帮助！
-标记
<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 ▼</div>
<div class="bio-readless">Read Less ▲</div>
</div>
</body>
I'm very familiar with HTML and CSS, but new to Javascript and jQuery. I am trying to figure out how to have multiple jQuery effects occur with one event (.click).
I have a DIV (.bio-description) that has a lot of text. I have made the .bio-description DIV height only 50px and set the overflow to hidden. When someone CLICKS the .bio-readmore DIV, I would like the following to happen: 1).bio-description DIV's height is set to 'auto' (so all the text is now visible), 2) .bio-readmore DIV disappears, and 3) .bio-readless DIV appears.
I have read quite a bit on jQuery.com and done a lot of searching around on Google. I have probably come across the answer already, but just haven't understood how to implement it.
Below is the code I have so far. The .bio-readmore does hide when clicked, but the other two actions don't occur. I have also tried different effects other than .height, like .css, .addClass, and .animate. However, nothing works and I figure it must have something to do with how I am trying to handle multiple effects with one event.
Thank you for any help you can offer!
-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 ▼</div>
<div class="bio-readless">Read Less ▲</div>
</div>
</body>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
您可以在单击事件（多行）上运行整个函数：
aaaaaa 就完成了！我喜欢 JQuery。
You can run an entire function on a click event (multiple lines):
aaaaaaand you're done! I love JQuery.
只需将其全部放在一个函数中即可：
根据 Felix 的评论，我使该函数的性能稍微提高了一些。如果您的文档中有多个
div.wrapper，那么它也是必需的。Just put it all in one function:
Based off of Felix's comment, I made the function slightly more performant. It would also be required if you had multiple
div.wrappers in your document.也许我遗漏了一些东西，但是你不会按程序执行这些行吗？ （这也是一个词吗？）
Maybe I'm missing something, but wouldn't you just execute the lines procedurally? (is that even a word?)
您是否有任何理由不将所有三个函数调用都执行在一个函数调用中？
Is there any reason you don't just do all three in one function call?
只需像在函数中一样立即执行所有函数：
Just perform all the functions at once like you would in a function:
听起来您想在这种情况下使用 .animate({...})：
http://api. jquery.com/animate/
您可以使用 Json 字符串来提供您希望在单击时以动画方式完成的所有更改的列表。
It sounds like you want to use .animate({...}) in this case:
http://api.jquery.com/animate/
You can use a Json string to supply a list of all the changes you want done animation wise on click.