Javascript切换效果的小问题

我有一个小问题，一个“切换”功能，我正试图落实到我的网站

这是我的名片

以下是我迄今为止的jQuery：

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

当我点击“阅读更多”时，我想将文本改为“隐藏”，反之亦然。目前，正如您在演示中所看到的，它正在同时破坏和显示这两个方面

我有一种感觉，我可能在设计这个，它可能比我做的简单得多

有什么好心的先生/女士能帮忙吗？：-）

当它们具有相同的类时，无需按ID选择，或者当您使用

toggle（）

时，无需设置CSS：

---

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

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

使用以下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>

使用以下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';
    });
});

---

.

必须在天顶等待10分钟-这就是你的速度-D非常感谢你花时间在这里帮忙——如果我能把事情复杂化，我总是倾向于：）干得好！！回答得好，大卫！我们来看看小提琴。为什么不直接用编程的方式设置按钮的文本呢。。？主要是@polywhill先生，因为我不认为这是一个特别的优势。但这不是个坏主意。

<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>

$('.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';
    });
});