1

I am having a small issue with a 'toggle' feature I'm trying to implemt into my website.

Here is my DEMO.

Here is my jQuery so far:

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

When I click 'Read More', I'd like to change the text to say 'Hide' and vice versa. Currently, as you can see from the demo, it is breaking & showing both at the same time.

I've a feeling I may be over-engineering this and it's probably a lot simpler than I've made it.

Can some kind gent/lady help out a little? :-)

4

2 回答 2

2

jsFiddle here.

No need to select it by ID when they have the same class, or set the CSS when you're using toggle():

$('#more').on('mousedown', function () {
    $('.texto, .a-btn-text').toggle();          
});
于 2013-06-13T19:51:55.417 回答
1

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

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

JS 小提琴演示。

使用以下 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 更改为以下内容（主要从ids 更改为使用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 小提琴演示。

于 2013-06-13T19:56:40.490 回答