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

Question

在第一次单击时,它按预期工作:

1. 班级改变了
2. 并且html内容从"显示..."更改为"关闭..."
3. 使用slideDown效果扩展内容区域,

目前很好.

在第二次点击,...

1. 班级改变了
2. html内容从"关闭..."更改为"显示..."
3. 内容区域不会按预期消失.

在第三次点击,...

1. 班级改变了
2. html内容已更改
3. 已经显示的内容以滑动效果重新显示.

因此,当内容应该再次隐藏时,除了第二次单击之外,一切正常.

这是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个URL的列表,用于显示所需数量的多列以显示所有URL.

卸下浮子:左; 在这些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修复问题.