Question

在第一次点击时，它按预期工作：

课程已更改
并且html内容从“显示...”更改为“关闭...”
使用slideDown效果扩展内容区域

到目前为止很好。

第二次点击，......

班级更改
html内容已从“关闭...”更改为“显示...”
内容区域不会按预期消失。

第三次点击，......

课程已更改
html内容已更改
已显示的内容以滑动效果重新显示。

所以除了第二次点击时，一切都在工作，因为内容应该再次被隐藏。

这是jQuery：

-

$('.open_user_urls').live('click', function() {
    $('#user_urls').slideDown('slow');
    $(this).addClass('close_user_urls');
    $(this).removeClass('open_user_urls');
    $(this).html('Close Search History');
    return false;
});

$('.close_user_urls').live('click', function() {
    $('#user_urls').slideUp('slow');
    $(this).addClass('open_user_urls');
    $(this).removeClass('close_user_urls');
    $(this).html('Show Search History');
    return false;
});

以下是它所采用的HTML：

<h3 class='open_user_urls'>Show Search History</h3>
<div id='user_urls'>
// an OL tag with content
</div>

唯一适用的CSS：

#user_urls { display: none; }

编辑 - 我用我在下面的答案中提供的功能等效代码替换了我的jquery代码，但问题仍然存在。所以原因必须在别处。我记得这个代码最初工作，但后来停止了。我很难过。是时候把一切都剥掉了......

编辑2 - 由于bug必须在别处，我接受我的jquery的代码改进作为答案。感谢。

编辑3 - 找到问题的根源。

在#user_urls div中，我有一系列带有以下css的OL：

.url_list {float: left; width: 285px; list-style-position: outside; margin-left: 25px;}

每个OL包含一个包含20个网址的列表，用于显示所需数量的多列，以显示所有网址。

移除浮子：左;在这些OL标签上会导致问题消失。

因此，在显示和隐藏的DIV中包含的内容上浮动会导致它根本不隐藏。为什么会这样？

编辑4：在#user_urls DIV中添加内部允许隐藏操作正常工作。

Answer 1

也许这样的事情会更简单？

$(".open_user_urls").toggle(
    function () {
        $(this).text("Close Search History").siblings(".user_urls").slideDown("slow");
    },
    function () {
        $(this).text("Show Search History").siblings(".user_urls").slideUp("slow");
    }
);

切换功能专为您遇到的情况而设计。

Answer 2

重申问题并解决这个问题......

#user_urls DIV内部是一系列OL标记，每个标记都向左浮动。导致问题的是漂浮物。

在<br style='clear: left;' /> #user_urls内添加DIV解决了问题。

Answer 3

根据我的发现，jQuery需要设置高度样式才能正确滑动。我使用的一种解决方法是在滑动它之前设置高度。

$('#user_urls').css('height', $('#user_urls').height() + 'px');

设置一次后，它应该可以正常工作。请查看this tutorial以获取更详细的说明。

Answer 4

自从这个问题被打开以来，jQuery已经自己解决了这个问题。

更新到latest version of jQuery解决了我们没有更改CSS的问题。（截至2010年12月9日的jQuery 1.4.4）

通过Google Groups上的d12's answer的讨论找到{{3}}。根据讨论，在一些jQuery 1.3x版本中，如果隐藏/滑动的元素是包含浮动子节点的非浮动父节点，则此错误影响了几个动作，slideUp，fadeOut和toggle。

Answer 5

我认为Conor的回答可能会让你走上正轨。我也可以建议使用slideToggle和toggleClass：

http://docs.jquery.com/Attributes/toggleClass

http://docs.jquery.com/Effects/slideToggle

我可以这么简单：

$("h3.open_user_urls").click(function () { 
      next("div#user_urls").slideToggle(); 
});

Answer 6

我不能复制你的错误。我使用了您的确切代码，我无法复制您的问题。

这必须是来自JS代码中不同位置的脚本错误。

Answer 7

感谢您提出这个问题。它确实帮我解决了问题，即浮动孩子的元素切换。

真正帮助并解释行为的另一种资源可以找到 on this Google group discussion.

Answer 8

在你的div中放置一个不间断的空间是另一种类似于The Reddest建议在类似问题上对我有用的解决方案。

jQuery幻灯片切换不工作 - 已解决

8 个答案: