javascript - 如何在某个包装器中隐藏上一个和下一个 sibling 的内容，而不是在 jQuery 中隐藏单击的 div？

Question

我为此编写了一个函数，但它没有实现我的目标。目前它正在单独隐藏所有以前的或所有下一个。但是当我同时应用两者时，它们甚至隐藏了那个 div 的内容。请在这方面提供帮助。

HTML部分是

<div id="improveformob" class="improve-wrapper">
    <div id="integrity" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>I</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Integrity</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
    <div id="inclusiveness" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>I</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Inclusiveness</h1>
        <p style="text-align:center;">We work as a team and want others to succeed. We care about our customers, employees, work environment and social responsibilities.</p>
    </div>
    <div class="box">
        <div class="icon">
            <span>
                                    <img src="images/new_slices/improve-m.png" width="80" />
                                </span>
        </div>
    </div>
    <div id="passion" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>P</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Passion</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
    <div id="responsivness" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>R</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Responsiveness</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
    <div id="openness" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>O</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Openness</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
    <div id="valcreation" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>V</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Value Creation</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
    <div id="excellence" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>E</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Excellence</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
</div>

JS

function toggle_visibility(id) {
    var e = id.id;
    $('#' + e).next().removeClass();
    //$('#' + e).not(this).siblings().addClass("hide");
    $('#' + e).prevAll().addClass('hide');
    $('#' + e).nextAll().addClass('hide');
}

请在这方面帮助我缺乏逻辑。

Answer 1

function toggle_visibility(id) {
  console.log(id)
    var e = id.id;
    $('.box').next().addClass('hide');//add the class hide to all so al will be hidden
    $(id).next().removeClass('hide');//then remove the hide class from the target div to show it
    //$('#' + e).not(this).siblings().addClass("hide");
}

.red{color:red}
.hide{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="improveformob" class="improve-wrapper">
    <div id="integrity" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>I</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Integrity</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
    <div id="inclusiveness" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>I</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Inclusiveness</h1>
        <p style="text-align:center;">We work as a team and want others to succeed. We care about our customers, employees, work environment and social responsibilities.</p>
    </div>
    <div class="box">
        <div class="icon">
            <span>
                                    <img src="images/new_slices/improve-m.png" width="80" />
                                </span>
        </div>
    </div>
    <div id="passion" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>P</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Passion</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
    <div id="responsivness" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>R</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Responsiveness</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
    <div id="openness" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>O</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Openness</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
    <div id="valcreation" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>V</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Value Creation</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
    <div id="excellence" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>E</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Excellence</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
</div>

1. 在所有信息div中添加display none
2. 在点击时为所有信息 div 添加隐藏类
3. 从目标div中移除类隐藏以显示目标div