Question

我正在尝试在我的网站上实施“切换”功能的小问题。

这是我的DEMO。

到目前为止，这是我的jQuery：

$('#more').on('mousedown', function () {
    $('.texto').toggle();
    $('span#buttonone','#more').toggle();
    $('span#buttontwo').css('display','block');         
});

当我点击“阅读更多”时，我想将文字更改为“隐藏”，反之亦然。目前，正如您从演示中看到的那样，它正在打破＆amp;同时显示两者。

我有一种感觉，我可能会过度设计这个，这可能比我做的要简单得多。

某位绅士/小姐可以帮帮忙吗？： - ）

Answer 1

jsFiddle here.

当他们拥有相同的类时，无需通过ID选择它，或者在使用toggle()时设置CSS：

$('#more').on('mousedown', function () {
    $('.texto, .a-btn-text').toggle();          
});

Answer 2

我个人建议您减少HTML，并使用以下内容：

$('#more').on('mousedown', function () {
    $('.texto').toggle();
    $('#moreLess').text(function(i,t){
        return t.trim() == 'Read More' ? 'Hide' : 'Read More';
    });
});

JS Fiddle demo

使用以下HTML：

<p>
    <a id="more" class="buttons a-btn">
        <span class="a-btn-symbol">&gt;</span>
        <!-- combined the two buttons -->
        <span id="moreLess" class="a-btn-text">Read More</span>
    </a>
</p>

<div class="texto">
    <p>Test</p>
</div>

同样，为了扩展性，我建议将HTML更改为以下内容（主要从id更改为使用class - es：

<p>
    <a class="more" class="buttons a-btn">
        <span class="a-btn-symbol">&gt;</span>
        <span class="moreLess" class="a-btn-text">Read More</span>
    </a>
</p>

<div class="texto">
    <p>Test</p>
</div>

<p>
    <a class="more" class="buttons a-btn">
        <span class="a-btn-symbol">&gt;</span>
        <span class="moreLess" class="a-btn-text">Read More</span>
    </a>
</p>

<div class="texto">
    <p>Test</p>
</div>

使用以下jQuery：

$('.more').on('mousedown', function () {
    var self = $(this),
        parent = self.parent();
    parent.next('.texto').toggle();
    parent.find('.moreLess').text(function(i,t){
        return t.trim() == 'Read More' ? 'Hide' : 'Read More';
    });
});

JS Fiddle demo

Javascript Toggle效果的小问题

2 个答案: