javascript - 多个 显示更多/显示更少

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 进行更多控制(并利用您提到的“this”)，您应该删除 Bootstrap 数据切换等并编写自己的逻辑来根据选择器显示和隐藏某些内容。大致如下:

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

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

注意，无需遍历每个事件并绑定(bind)到单击事件。 jQuery 选择器自动将处理程序绑定(bind)到该类的所有元素。