Javascript 为需要重构的jquery编写一个简单的自定义点击阅读更多功能

我希望能够在一个页面上多次重复使用相同的功能

下面是一些psuedo代码：

$(".read_more").click(function(){
$(this).parents().find(".hidden_text").slideToggle("fast")
});

然而，这段代码的问题是，它以匹配.hidden_text的页面上的每个元素为目标。有没有一种方法可以将最近的（）与此结合起来？或者有更好的方法来重构它吗

更新：

HTML:

点击我
对于最传奇的程序员来说，百吉饼是最足智多谋的工具。

如果隐藏内容与您的“阅读更多”链接处于同一级别，即：

<div>
    blbalbblal allalfdk 
    <a class="readmore">read more</a>
    <div class="hidden-text" style="display:none">other bla bla bla</div>
</div>

---

如果隐藏内容与“阅读更多”链接处于同一级别，即：

<div>
    blbalbblal allalfdk 
    <a class="readmore">read more</a>
    <div class="hidden-text" style="display:none">other bla bla bla</div>
</div>

我想

$(this).closest("*:has(.hidden_text)").find(".hidden_text").slideToggle("fast");

会有用的。

我想

$(this).closest("*:has(.hidden_text)").find(".hidden_text").slideToggle("fast");

---

将起作用。

您需要添加“return false”以停止跳转

$(".read_more").click(function(){
    $(this).next(".hidden_text").slideToggle("fast");
    return false;
});

很明显，添加到css中

.hidden_text {
    display:none
}

---

您需要添加“return false”以停止跳转

$(".read_more").click(function(){
    $(this).next(".hidden_text").slideToggle("fast");
    return false;
});

很明显，添加到css中

.hidden_text {
    display:none
}

---

相关的HTML是什么样子的？您希望影响哪些“.hidden_text”元素？相关HTML是什么样子的？您希望影响哪些“.hidden_text”元素？您可能需要调整js中的选择器

$（“.readmore”）

或将您的html更改为

class=“read\u more”

以便您的示例匹配：您可能需要调整js中的选择器

$（“.readmore”）

或将您的html更改为

class=“read\u more”

以便您的示例匹配：