jQuery实现点击元素切换显示、隐藏其他非关联元素求助

嘿，别担心，这个问题一点都不浅显——很多刚接触jQuery的开发者都会在DOM元素的关联匹配上卡壳，我来帮你梳理清楚~

你的核心需求是点击某个按钮时，只显示对应的内容区块，同时隐藏其他所有内容，但当前代码的问题在于：$(this).parents().find('p')会选中所有.high-parent下的<p>元素，这就导致$(".div-hide p").not(hideAll)找不到任何需要隐藏的元素，最后执行hideAll.toggle()就会把所有内容一起切换状态，自然达不到预期效果。

问题根源 #

你的按钮（.item a）和对应的内容区块（.div-hide p）是按顺序一一对应的，但它们之间没有直接的父子/关联关系，而是共享同一个父容器.high-parent。所以我们需要通过索引匹配的方式，把按钮和对应的内容绑定起来。

修正后的代码 #

下面是调整后的完整代码，我会逐行解释逻辑：

JavaScript 部分

// 初始隐藏所有内容区块
$('.div-hide p').hide();

$('.item a').click(function(e) {
    e.preventDefault();
    
    // 获取当前点击按钮所在.item的索引（从0开始）
    const currentIndex = $(this).closest('.item').index();
    
    // 1. 隐藏所有内容区块
    $('.div-hide p').hide();
    // 2. 找到对应索引的.div-hide下的p，切换它的显示状态
    $('.div-hide').eq(currentIndex).find('p').toggle();
});

HTML 部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="high-parent">
    <div class="item">
        <a href="">button1</a><br>
    </div>
    <div class="item">
        <a href="">button2</a><br>
    </div>
    <div class="item">
        <a href="">button3</a><br>
    </div>
    <div class="item">
        <a href="">button4</a><br>
    </div>
    <div class="div-hide">
        <p>First part</p>
    </div>
    <div class="div-hide">
        <p>Second part</p>
    </div>
    <div class="div-hide">
        <p>Third part</p>
    </div>
    <div class="div-hide">
        <p>Fourth part</p>
    </div>
</div>

逻辑解释 #

1. 获取索引：$(this).closest('.item').index() 会找到当前点击按钮的直接父容器.item，然后获取它在所有同级.item中的位置索引（比如第一个.item索引是0，对应第一个.div-hide）。
2. 统一隐藏：先把所有内容区块隐藏，确保只有目标内容会被显示/切换。
3. 匹配并切换：用.eq(currentIndex)找到对应索引的.div-hide，再选中里面的<p>执行toggle()，实现点击按钮时，对应内容切换显示/隐藏，其他内容保持隐藏。

额外优化建议 #

如果后续按钮和内容的数量可能变化，或者想让逻辑更清晰，可以给按钮和对应的内容添加自定义属性（比如data-target）来直接关联，比如：

<div class="item">
    <a href="" data-target="content1">button1</a><br>
</div>
<div class="div-hide" id="content1">
    <p>First part</p>
</div>

对应的JS可以改成：

$('.item a').click(function(e) {
    e.preventDefault();
    const targetId = $(this).data('target');
    $('.div-hide p').hide();
    $('#' + targetId).find('p').toggle();
});

这种方式不需要依赖顺序，扩展性更强~

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