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

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

Answer 2

使用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');
   }
});

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

Answer 3

只需使用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');
});

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

3 个答案:

DEMO