如何在某個包裝器中隱藏上一個和下一個兄弟的內容，而不是在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. 將display none添加到所有信息div
2. 單擊時將隱藏類添加到所有信息div
3. 從目標div中刪除類hide以顯示目標div

Answer 2

嘗試這個：-

我希望這就是你要找的東西：

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