Question

好吧，所以我为以下内容编写了以下代码：＃more;＆＃39;按钮。点击它切换div并更改“阅读更多”＆＃39;要少阅读＆＃39;。单击另一个关闭另一个打开的div，并将文本切换为适当的措辞。

然而，我似乎无法弄清楚如何让文字切换回“阅读更多”字样。当我点击相同的切换按钮时。

实施例阅读更多x 阅读更多y

如果我点击“阅读更多x＆＃39;”，它会切换x的隐藏div，按钮变得更少x＆＃39;。当我点击“阅读较少的x＆＃39;”时，它会切换div而BUT保持为＆＃39;读取较少x＆＃39;而不是回复。

我已尝试在函数的各个部分推送$（this）.text片段，但无济于事。

＆＃13;

$(document).ready(function () {
        var content = $('.below').hide();
        $('.toggleBtn').on('click', function () {
             var $this = $(this);
			$(this).text("read less");
           $this.next('.below').slideToggle().siblings('.below').slideUp();
           $this.toggleClass('active').siblings('.toggleBtn.active').removeClass('active').text("read more");
            return false;
			});
        //register the handler to button element inside .below
        $('.below .close').on('click', function () {
            //find the ancestor .below element of the clicked button
            $(this).closest('.below').slideToggle();
        });
    });

＆＃13;

.below {display: none;}

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>

<div class="toggleBtn">read more x</div>
<div class="below">slideout x</div>

<div class="toggleBtn">read more y</div>
<div class="below">slideout y</div>

＆＃13;

Answer 1

我建议使用data属性存储当前文本，如下所示：

$(document).ready(function () {
        var content = $('.below').hide();
        $(".toggleBtn").each(function(){
           $(this).data("text", $(this).text()); //Save the current text() to data-text attribute
        });
        $('.toggleBtn').on('click', function () {
           var $this = $(this);
           
           if($this.text() == "read less")
              $this.text($this.data("text")); //Replace text with data-text if clicked again
           else
              $this.text("read less");
           
           $this.next('.below').slideToggle().siblings('.below').slideUp();
           $this.toggleClass('active').siblings('.toggleBtn.active').each(function(){
              $(this).text($(this).data("text")); //Replace previous open sibling text with data-text
           }).removeClass('active');
            return false;
			});
        //register the handler to button element inside .below
        $('.below .close').on('click', function () {
            //find the ancestor .below element of the clicked button
            $(this).closest('.below').slideToggle();
        });
    });

.below {display: none;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>

<div class="toggleBtn">read more x</div>
<div class="below">slideout x</div>

<div class="toggleBtn">read more y</div>
<div class="below">slideout y</div>

Answer 2

Fromdecay，如果你对不同的方法感兴趣，这是另一种编码方式：

.promise().done(...)

.is(':visible')等待幻灯片动画完成。这给出了令人愉悦的视觉效果。测试元素的内容是不好的做法。
可以丢弃className'active'（除非样式需要）。
javascript可以没有硬编码的文本字符串（至少是UI中出现的字符串）。可以在HTML中将更多/更少的文本定义为data-属性，这些属性用于设置按钮的文本，类似于@ imtheman的答案。
通过从“关闭”按钮触发.toggleBtn点击处理程序，可以执行点击处理程序的所有优秀工作，而无需命名函数，也无需复制任何代码。

做这一切，不管你信不信，代码量实际上减少了。

$(document).ready(function () {
	$(".toggleBtn").on('click', function (e) {
		$(this).next('.below').slideToggle().siblings('.below').slideUp().andSelf().each(function() {
			var $below = $(this);
			$below.promise().done(function() {
				var $btn = $below.prev('.toggleBtn');
				$btn.text($btn.data( $below.is(':visible') ? 'less' : 'more' ));
			});
		});
	});
	$('.below .close').on('click', function (e) {
		$(this).closest('.below').prev('.toggleBtn').trigger('click');//trigger the click on the corresponding `.toggleBtn` element.
	});
});

.below {display: none;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>

<div class="toggleBtn" data-more="read more x" data-less="read less x">read more x</div>
<div class="below">slideout X</div>

<div class="toggleBtn" data-more="read more y" data-less="read less y">read more y</div>
<div class="below">slideout Y</div>

<div class="toggleBtn" data-more="read more z" data-less="read less z">read more z</div>
<div class="below">slideout Z</div>

关闭时恢复幻灯片切换按钮文本

2 个答案: