显示/隐藏不能正常工作?
我有这样的一些HTML:显示/隐藏不能正常工作?
<div class="clearfix wanted_item">
<div class="clearfix">
<div class="float_right"><img src="images/pin.png"></div>
<div class="float_right">
<h3>a</h3>
<div>abcd</div>
</div>
</div>
<div class="float_right more_details" style="display: block;">
<ul>
<li>some list</li> </ul>
<div class="application_link">
<a class="orange_button" href="volunteer.php?volunteer_type=1"><span>apply</span></a>
</div>
</div>
<a class="float_left clearfix more_details_link" href="javascript:void(0);">Show details</a>
</div>
而且我有这样的jQuery代码:
$(".less_details_link").click(function() {
$(this).parent().children(".more_details").slideUp(500);
$(this).text("Show details");
$(this).removeClass('less_details_link');
$(this).addClass('more_details_link');
});
$(".more_details_link").click(function() {
$(this).parent().children(".more_details").slideDown(500);
$(this).text("Hide details");
$(this).removeClass('more_details_link');
$(this).addClass('less_details_link');
});
出于某种原因,当我点击“显示”链接能正常工作,我也可以看到,它将类更改为less_details_link
,但第二个click()
函数无法在没有任何输出到控制台日志的情况下运行。当我点击“隐藏详细信息”链接时,它只是没有做任何事情。
这是因为当你添加一个类的元素,它不与它带来的事件处理程序,除非你对(jQuery API: on)使用的事件处理程序
$("body").on("click",".less_details_link",function() {
$(this).parent().children(".more_details").slideUp(500);
$(this).text("Show details");
$(this).removeClass('less_details_link');
$(this).addClass('more_details_link');
});
$("body").on("click",".more_details_link",function() {
$(this).parent().children(".more_details").slideDown(500);
$(this).text("Hide details");
$(this).removeClass('more_details_link');
$(this).addClass('less_details_link');
});
这很好,谢谢!只是好奇为什么不Kacey的解决方案工作,你的呢? – 2013-04-25 21:35:11
@hoverhand - Kacey没有使用事件代表团。当以这种形式使用时,'on'只会附加类似于原始方法的点击事件。当在这种形式中使用'on'时,它会将事件委托出去,这就允许将来的元素拥有那个事件处理器。 [jQuery API:on](http://api.jquery.com/on/) – 2013-04-25 21:36:22
@hoverhand他是对的。我回答的太快了,我没有想到这一点。 – 2013-04-25 21:38:17
这是比它需要更复杂的方式。它的一个链接,只是给它一个额外的类来表示是否扩展或不扩展,然后做一个简单的if函数来确定是否激活。
谢谢@Kacey对.slideToggle()
和.toggleClass()
的推荐,更简单一些。
$(".more_details_link").click(function() {
var $this = $(this);
$this
.toggleClass('active')
.prev()
.stop()
.slideToggle(500);
$this.hasClass('active') ? $this.text("Show details") : $this.text("Hide details");
});
编辑为使用三元if功能的文本。
'.toggleSlide()'和'.toggleClass()'怎么样?这会使它更加复杂。 – 2013-04-25 21:34:37
良好的通话,有很多清理我没有考虑到它 – PlantTheIdea 2013-04-25 21:35:39
这么多的代码效率,一旦它的工作原理没有一度关心速度。天啊。 – PlantTheIdea 2013-04-25 21:47:26
当你的jQuery加载时,没有.less_details_link
可用,所以它不能挂钩.click()
函数。你想要做的是设置你的功能,像这样:
$(".less_details_link").on("click", function() { ... }
$(".more_details_link").on("click", function() { ... }
这也行不通。特拉维斯J有正确的语法。 – OptimusCrime 2013-04-25 21:36:42
你可以把这个在[jsfiddle](http://jsfiddle.net/)给我们吗? – 2013-04-25 21:30:39