我正在尝试使用创建切换按钮.details。首次加载时，它应显示为“ Display [+]”（.details-display隐藏）。单击文本后，应向下.details-display滑动，将其更改为“显示[-]” 。为什么这不起作用？
的HTML
<div class="slide-caption">
<span class="details">Details[+]</span>
<span class="details-display">The connecting walkway floats above the second story of the Main hall, joining the North and the South wings.</span>
</div>
JS
$('span.details').toggle(function(){
$(this).html('Details[-]');
$(this).parent().find("span.details-display").slideDown("slow");
}, function() {
$(this).html('Details[+]');
$(this).parent().find("span.details-display").slideUp("slow");
});
的CSS
.details-display {
display: none;
}
这是您的jsFiddle的更新的工作版本：
http://jsfiddle.net/xrzcu0na/6/
我将代码更改为此：
var toggled = true;
$('span.details').click(function () {
if (toggled) {
$(this).html('Details[-]');
} else {
$(this).html('Details[+]');
}
toggled = !toggled;
$(this).parent().find("span.details-display").slideToggle("slow");
});
其中添加了点击处理程序，以在点击时切换元素。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句