javascript - "more/less"切换内容

Question

所以我在这里有一个经典的“更多/更少”段落:

http://jsfiddle.net/dVFaV/38/

当我点击“更多信息”时，该链接会显示一些内容，同时它会切换到“较少信息”，但我只想一次在一个链接上发生这种情况，因为我的链接上会有更多段落页。现在，当我单击“更多信息”链接时，另一个链接也会切换，这是我试图避免的。

感谢任何帮助!!!

Answer 1

如果你的 HTML 结构保持这样，你可以简单地使用:

function togglePanel() {
    var $this = $(this);
    if ($this.hasClass('button_open')) 
      $this.parent().next().slideDown('slow');
    else 
      $this.parent().next().slideUp('slow');

    $this.hide().siblings().show();
}

$('.adv-toggle-buttons > a').click(togglePanel);

​http://jsfiddle.net/WFC7s/

编辑:或者像Bondye在他的回答中所说的那样，使用slideToggle:

function togglePanel() {
    var $this = $(this);
    $this.parent().next().slideToggle('slow');
    $this.hide().siblings().show();
}

$('.adv-toggle-buttons > a').click(togglePanel);