Question

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

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

任何帮助表示赞赏!!!

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);

Answer 2

为什么不使用toggle()和slideToggle()？

HTML

<p class="adv-toggle-buttons">
    <a href="#">[+] More info</a>
    <a href="#" style="display: none;">[-] Less info</a>
</p>
<div class="adv-unit-options" style="display: none;">Lorem ipsum</div>

<p class="adv-toggle-buttons">             
    <a href="#">[+] More info</a>
    <a href="#" style="display: none;">[-] Less info</a>
</p>
<div class="adv-unit-options" style="display: none;">Lorem ipsum</div>

的jQuery

$('.adv-toggle-buttons a').each(function() { 
    $(this).on('click', function(){
        $(this).parent().next().slideToggle();
        $(this).parent().find('a').each(function(){
            $(this).toggle();

        });
    });   
});

小提琴

http://jsfiddle.net/dVFaV/40/

Answer 3

使用上述内容，您必须为内容保留2个容器。一个用于短“较少”版本，一个用于较长“更多”版本。我喜欢让我的内容尽可能容易地更新，并且实际上遇到了我无法做任何事情但除了将JS添加到内容以调整dom之外的情况。我最终使用相同的内容，只是在剪切之前将其条带化为文本。这样可以防止您删除任何HTML标记并弄乱内容。

您的HTML将类似于：

<div class="entry-content">
    <div class="event-detail">
        <div class="bio">
            <p><h2>Lorem 1</h2> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

    <div class="event-detail">
        <div class="bio">
            <p><h2>Lorem 2</h2> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
    </div>

JS会查找每个bio并添加更多/更少的按钮，并且还会将副本截断为适用于您的布局的设置值。 JS应该是：

$(document).ready(function(){
    var num_of_bios = $('.entry-content .bio').length;
    for (i = 0; i < num_of_bios; i++) {
        bio_more = $('.bio:eq('+i+')').html();
        bio_less = $('.bio:eq('+i+')').text();
        bio_less = bio_less.substring(0,200);
        $('.bio:eq('+i+')').html(bio_less+' ... ');
        $('.bio:eq('+i+')').addClass('bio_less bio_'+i);
        $('.bio:eq('+i+')').parent().append('<div class="bio_more bio_'+i+'">'+bio_more+'</div>');
        $('.bio_more').hide();
        $('.bio:eq('+i+')').parent().append('<div class="bio_more_less" name="bio_'+i+'">more</div>');
    }
    $('.bio_more_less').click(function(){
        show_me = $(this).text();
        bio_name = $(this).attr('name');
        if( show_me === 'more'){
            $('.bio_less.'+bio_name).hide();
            $('.bio_more.'+bio_name).show();
            $(this).text('less');
        }
        else if( show_me === 'less'){
            $('.bio_less.'+bio_name).show();
            $('.bio_more.'+bio_name).hide();
            $(this).text('more');
        }
    });

    });

这是一个小提琴。 http://jsfiddle.net/jaredlyvers/pezw77bk/10/

＆＃34;多/少＆＃34;切换内容

3 个答案:

HTML

的jQuery

小提琴