如何在某个包装器中隐藏上一个和下一个兄弟姐妹的内容，但不隐藏 jQuery 中单击的 div 的内容？

Question

我为此编写了一个函数，但它没有实现我的目标。目前它正在dividually 隐藏所有以前的或所有下一个。但是，当我同时应用两者时，它们甚至会隐藏 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

试试这个：-

希望这就是您要找的：

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 info">
                    <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 info">
                    <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 info">
                    <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 info">
                    <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 info">
                    <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 info">
                    <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 info">
                    <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;
  $('.info').addClass("hide");
  $("#"+e).next().removeClass("hide");

 }

CSS

.hide{
   display:none;
}

Answer 2

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>

为所有信息添加显示nonediv
单击
从目标中移除 class 隐藏 div 以显示目标 div

Answer 3

希望这对你有用。它仅显示单击的部分并隐藏所有其他部分。

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

<script>
  
  function toggle_visibility(id) {
  var e = id.id;  
 $('#improveformob').find('.hide').hide(); // hide all when clicked
 $('#' + e).next('.hide').show(); // show the next one on click
}
</script>

Answer 4

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

    <style>
        .hide {
            display: none;
        }
    </style>
</head>

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

    <script>
        function toggle_visibility(btn) {
            var e = $(btn).attr("id");
            $(".box").each(function () {
                $(this).next("div").addClass("hide");
            })
            $(btn).next("div").removeClass("hide");
        }


    </script>
</body>
</html>

如何在某个包装器中隐藏上一个和下一个兄弟姐妹的内容，但不隐藏 jQuery 中单击的 div 的内容？

How to hide content of previous and next siblings in a certain wrapper but not of clicked div in jQuery?

html

javascript

jquery

show-hide