Jquery slideDown 未按预期工作

Question

我不知道为什么以下内容不会缓慢下滑。请注意，div 是内联的。

<span id="readMoreLink" style="display: inline"><a style="color: #213d92" class="textlink" id="readMore "href="#"> ...Read More</a></span>
<div id="bioText" style="display: inline">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div> 

$('#readMore').click(function (e) {             
    $('#bioText').slideDown(1000);
    $('#readMoreLink').hide();
    e.preventDefault();
});

注：如果它删除显示：内联，它工作正常。是显示：内联导致了问题。不过我需要内联显示。不知道如何解决这个问题。

Answer 1

你在找这个吗？

$('#readMore').click(function (e) {
    $('#bioText').slideToggle(1000);
    $('#readMoreLink').hide();
    e.preventDefault();
});

小提琴

Answer 2

我不知道这是否是您问题的解决方案，但请注意，在您问题的示例代码中，标签的 ID 属性上有一个额外的空格：

id="readMore " 
<a style="color: #213d92" class="textlink" id="readMore "href="#">

结束语之前有一个额外的空格。

您的 jQuery 代码不会重现该空格，因此 ID 的名称不同。

$('#readMore').click(function (e) {

---

您的代码确实可以使用该固定的：jsFiddle 演示