javascript - Javascript Toggle 効果の小さな問題

Question

Web サイトに実装しようとしている「トグル」機能に小さな問題があります。

これが私のデモです。

これまでの私のjQueryは次のとおりです。

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

[もっと読む] をクリックすると、テキストを [非表示] に変更したいのですが、その逆も同様です。現在、デモからわかるように、両方を同時に中断して表示しています。

私はこれを過度に設計している可能性があると感じており、おそらく私が作ったものよりもはるかに単純です.

親切な紳士/女性が少し手伝ってくれませんか? :-)

Answer 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 フィドルのデモ。