Question

如何切换文字以显示更多/显示更少并更改图标箭头以向上/向下翻页？

更新的代码：

JS

$('.show-more').on('click', function() {
   $(this).parent('.show-more-wrapper').find('.additional-content').toggle();
   $(this).text('Show Less');
   $('i', this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

HTML

                <div class="show-more-wrapper">
                  <a href="#" class="show-more">Show More<i class="glyphicon glyphicon-chevron-down"></i></a>
                  <div class="additional-content">
                    Lorem 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.
                    </div>
                </div>
                <div class="show-more-wrapper">
                  <a href="#" class="show-more">Show More<i class="glyphicon glyphicon-chevron-down"></i></a>
                  <div class="additional-content">
                    Lorem 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.
                  </div>
                </div>

Answer 1

当您只使用一种方式时，您正在使用两种不同的显示和隐藏方式。

正如另一张海报所提到的，你应该有独特的引用来显示和隐藏内容，否则它们都会一起打开和关闭。

如果您想使用该方法，请查看此处的bootstrap示例（在使用数据切换时无需编写任何自己的javascript）： http://getbootstrap.com/javascript/#collapse-example-accordion

你的javascript工作不正常（你也可以删除它）。如果你想利用javascript来控制更多（并且正如你所提到的那样使用＆＃34;这个＆＃34;你应该删除引导数据切换等，并编写自己的逻辑来显示和隐藏基于选择器的某些内容。有点像：

$('.show-more').on('click', function() {
  $(this).siblings('.additional-content').toggle();
});

https://jsfiddle.net/r0m4n/kppn1mww/

注意，没有必要遍历每个并绑定到click事件。 jQuery选择器自动将处理程序绑定到具有该类的所有元素。

Answer 2

您需要为不同的可切换部分使用唯一ID或类。在这里，你给了他们同一个班级.additional-content，所以他们都会打开或关闭。将第二个命名为.additional-content-2并在触发链接中更改它，并为此添加一个新脚本。

Answer 3

此代码更改了文本和图标。

 function showMore() {
$('.show-more').on('click', function() {
   $(this).parent('.show-more-wrapper').find('.additional-content').toggle(); //Show/Hide Content
   $(this).find('span').text($(this).find('span').text() == 'Show More' ? 'Show Less' : 'Show More'); //Change Text              
   $(this).find('i').toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); //Change icon
});
}

多个显示更多/显示更少

3 个答案: