我有一个触发元素和一个响应元素。
<div class="more"></div>
<div class="info"></div>
我想绑定一个打开/关闭类型的事件。
$('.more').delegate($('.more'), 'click', function(){
$(this).removeClass('more');
$(this).addClass('less');
$(this).text("less...");
$('.info').addClass("open");
});
$('.less').delegate($('.less'), 'click', function(){
$(this).addClass('more');
$(this).removeClass('less');
$(this).text("more...");
$('.info').removeClass("open");
});
它不能按预期工作，如果第二个函数嵌套在第一个函数中，则只能打开和关闭一次。如果按上述方式合理地格式化了脚本，它将打开但不会关闭。
有人可以帮我吗？如果脚本可以支持.info，则可能是兄弟姐妹，或者是紧随$（。more / .less）父元素的元素。
我一直在玩.on / .live / .bind，但成功的程度不如上面。
只需使用JavaScript切换类，然后让CSS magic完成其余工作即可。这是一个演示：http : //jsfiddle.net/pomeh/69sX5/1/
这是代码：
的HTML
<div>
Some visible content
</div>
<div class="content-fold">
<div class="more">More...</div>
<div class="less">Less...</div>
</div>
<div class="info">Some hidden additional content</div>
的CSS
/* Additional content and Less button hidden by default */
.content-fold + .info, .content-fold .less {
display: none;
}
/* Additional content and Less button shown when class shown is active */
.content-fold.shown + .info, .content-fold.shown .less {
display: block;
}
/* More button hidden when additional content is shown */
.content-fold.shown .more {
display: none;
}
/*
You can also move the "div.info" into the "div.content-fold",
and use ".content-fold.shown > .info" instead of ".content-fold.shown + .info"
Browser support is quite good for adjacent selector (see http://www.quirksmode.org/css/selectors/#t11 and https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors#Browser_compatibility)
*/
的JavaScript
$('.content-fold').on('click', function(){
$(this).toggleClass('shown');
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句