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

在第一次点击，它按预期工作：jQuery的幻灯片切换不工作 - 已解决

类改变
和HTML内容来自改为“显示...”到“关闭。 ..”
内容区域与了slideDown效果扩大，

好为止。

在第二次点击，...

类改变
HTML内容更改从 '关闭...' 以 '显示...'
内容方面的确不要按预期离开。

在第三次点击，...

类改变
的已经显示的内容与效果了slideDown重新显示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代码机智h函数等效代码在下面的答案中提供，但问题仍然存在。所以这个原因必须在别处。我确实记得原来的代码，但后来停止了。我很难过。时间剥去一切一块一块地...

编辑2 - 由于错误必须在其他地方，我接受我的jquery的代码改进作为答案。谢谢。

编辑3 - 发现问题的根源。

里面的#user_urls DIV我有以下CSS的一系列白领女性的：

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

每个OL包含20个网址列表，其目的是显示根据需要显示所有尽可能多的多列网址。

删除浮动：左;在这些OL标签上导致问题消失。

因此，对DIV中包含的内容进行浮动显示和隐藏会导致它不会隐藏。为什么会发生？

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

来源

2009-03-02 Ian

这是一个Jquery的已知问题，对浮动容器和/或内容的切换反应不佳。我正在寻找方法来绕过这一点，或替换我的情况下切换使用。我会打你发布。（看起来好像主要发生在FF和chrome中都有不同的表现方式，令人惊讶的是一旦IE看起来表现得更好） – Ar3s 2011-05-02 12:30:22

也许像这样会更简单？

$(".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"); 
    } 
);

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

来源

2009-03-02 23:18:43

奇怪的是，同样的问题出现在你的函数中，和我的原始函数一样。问题必须在其他地方... – Ian 2009-03-02 23:26:16

但是，我更喜欢你的代码，所以我会接受你的答案，并在一定程度上改变这个问题。谢谢 – Ian 2009-03-02 23:36:31

谢谢。对不起，我没有把你带到那里。 – 2009-03-02 23:42:42

从我发现，jQuery需要设置高度样式才能正确滑动它。我使用过的一项工作是在关闭幻灯片之前设置高度。

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

设置一次后，它应该从此开始正常工作。查看this tutorial获取更详细的解释。

来源

2009-03-02 23:23:23

我想康纳尔的回答可能会让你走上正轨。我还想建议的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(); 
});

来源

2009-03-02 23:29:39 superUntitled

我不能重复你的错误。我用你的确切代码，我不能复制你的问题。

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

来源

2009-03-02 23:32:38 wambotron

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

里面的#user_urlsDIV进行了一系列的OL标签，每个向左浮动。这是导致问题的浮点数。

加入<br style='clear: left;' />里面的#user_urlsDIV修复了这个问题。

来源

2009-03-02 23:49:53 Ian

感谢您的回答。它确实帮助我找出了浮动孩子的问题。

另一个资源，真正帮助和解释了一下，可以发现 on this Google group discussion.

来源

2009-07-01 01:23:16 davidmdem

把你的DIV非打破空间是类似于最红的建议，为我工作在一个类似的问题的另一个解决方案的行为。

来源

2009-07-19 04:50:24 cweston

由于此问题已打开，jQuery已为此自行修复此问题。

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

通过关于Google Groups的讨论找到，依次从d12's answer找到。根据讨论，在一些jQuery 1。3x版本这个bug影响了一些动作，如slideUp，fadeOut和toggle，如果元素被隐藏/向上滑动是一个包含浮动子元素的非浮动父元素。

来源

2010-12-09 10:20:49

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

回答

相关问题