如何让jQuery的preventDefault与toggle仅作用于read more按钮对应元素

问题原因 #

你当前代码的问题出在点击事件中使用了全局选择器$("p")，这个选择器会匹配页面内所有<p>标签，所以点击任意按钮都会触发所有p标签的展开/收起。另外你给每个按钮单独绑定事件的写法冗余，后续新增同类元素还需要重复编写绑定代码，维护成本很高。

修复方案 #

方案1：适配现有结构的最小修改 #

无需调整HTML和CSS，直接把原来的两段按钮事件绑定代码替换为以下内容即可：

// 统一匹配所有id以readmore_开头的按钮绑定事件，后续新增按钮只要id符合命名规则无需重复绑定
$("[id^='readmore_']").click(function(e) {
    e.preventDefault();
    // 仅切换当前按钮所属内容容器下的p标签，不影响其他元素
    $(this).closest("[id^='content_']").find("p").toggle("fast");
    // 切换按钮文本
    const currentText = $(this).html().trim();
    $(this).html(currentText === "Read less" ? "Read more" : "Read less");
    // 你原来的固定scrollTo建议删除，不同元素位置不同固定滚动值体验很差，如需滚动可以替换为下面的代码：
    // $('html, body').animate({scrollTop: $(this).closest("[id^='content_']").offset().top}, 200);
});

如果不想改绑定逻辑，也可以单独修改每个事件的p选择器：#readmore_01的事件内把$("p").toggle("fast")改为$("#content_01 p").toggle("fast")，#readmore_02的事件内改为$("#content_02 p").toggle("fast")，也能解决问题，只是灵活性较差。

方案2：优化为通用结构（推荐） #

可以统一类名去掉序号后缀，后续新增同类元素完全不需要修改JS和CSS，维护更方便：

1. 修改HTML，给内容容器统一加content-item类，给按钮统一加readmore-btn类：

<div class="wrapper">
    <div class="content-item" id="content_01">
        <div>Das ist ein toller Saugroboter</div>
        <p style="display:none">Das ist mehr content </p>
        <div class="toggleBtn">
            <i class="fa fa-plus readmore-btn"> Read more</i>
        </div>
    </div>
    <div class="content-item" id="content_02">
        <div>Das ist der zweite tolle Saugroboter</div>
        <p style="display:none">Das ich noch mehr content</p>
        <div class="toggleBtn">
            <i class="fa fa-plus readmore-btn">Read more</i>
        </div>
    </div>
    <!-- 其余结构保持不变 -->
</div>

2. 合并重复的CSS样式：

/* 原来的toggleBtn_01、toggleBtn_02样式可以删除，替换为以下通用样式 */
.toggleBtn{
    cursor:pointer;
    color:#ff7c26;
    font-size:115%;
    user-select: none;-moz-user-select: none; -webkit-user-select: none;-ms-user-select: none;
}
.toggleBtn:hover{
    color:white;
}

3. 简化JS逻辑：

$(".readmore-btn").click(function(e) {
    e.preventDefault();
    $(this).closest(".content-item").find("p").toggle("fast");
    const currentText = $(this).html().trim();
    $(this).html(currentText === "Read less" ? "Read more" : "Read less");
});

内容的提问来源于stack exchange，提问作者Question__