jQuery 将事件绑定到具有动态类的元素

Question

我有一个触发元素和一个响应元素。

<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 但不如上面成功。

Answer 1

使用事件delegation，并绑定到文档或直接父级，不是同一个元素

$(document).on( 'click',".more", function(){
    $(this).removeClass('more');
    $(this).addClass('less');
    $(this).text("less...");
    $('.info').addClass("open");
});

$(document).on('click',".less", function(){
    $(this).addClass('more');
    $(this).removeClass('less');
    $(this).text("more...");
    $('.info').removeClass("open");
});

DEMO

注意：delegate 在最新版本的 jquery 中已过时，因此请改用 on， ISSUE：您被委派了相同的元素 $('.less'),$('.more') 使用即时 parent 或文档

Answer 2

只需使用 JavaScript 切换一个类，其余的交给 CSS 魔法。这是一个演示：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');
});

Answer 3

使用 id 来完成您的任务。这很容易。 html

<div class="more" id="toggle"></div>
<div class="info"></div>

jQuery

$('#toggle').click(function(){
   var $this = $(this) //store object
   if($this.hasClass('more')) {
      $this.removeClass('more').addClass('less').text('Less...')
      $this.next('.info').addClass('open');
   } else {
      $this.removeClass('less').addClass('more').text('More...')
      $this.next('.info').removeClass('open');
   }
});

js 小提琴：http://jsfiddle.net/5N6TL/53/