所以我在这里有一个经典的“更多/更少”段落：
当我点击“更多信息”时，链接会显示一些内容，同时它会切换到“更少信息”，但我只希望一次只在一个链接上发生这种情况，因为我的页面上会有更多段落。现在，当我单击“更多信息”链接时，另一个链接也会切换，这是我试图避免的。
任何帮助表示赞赏！
问问题
4417 次
3 回答
3
如果你的 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);
编辑：或者像Bondye在他的回答中所说的那样，使用 slideToggle ：
function togglePanel() {
var $this = $(this);
$this.parent().next().slideToggle('slow');
$this.hide().siblings().show();
}
$('.adv-toggle-buttons > a').click(togglePanel);
于 2012-10-10T14:00:03.680 回答
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();
});
});
});
</p>
小提琴
于 2012-10-10T14:08:54.697 回答
0
使用上述内容，您必须为内容保留 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');
}
});
});
于 2015-01-05T22:06:22.943 回答