如何在某个包装器中隐藏上一个和下一个兄弟的内容，而不是在jQuery中隐藏单击的div？(How to hide content of previous and next siblings in a certain wrapper but not of clicked div in jQuery?)
我为此目的编写了一个函数，但它没有实现我的目标。 目前它单独隐藏所有之前或所有下一个。 但是，当我同时应用它们时，它们甚至隐藏了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'); }在这方面请帮助我缺乏逻辑。
I wrote a function for this purpose but it is not achieving my targets. Currently it is hiding either all previous or all next individually. But when i apply both at a time they hide even that div's content. Kindly help in this regard.
Html Part is
<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'); }Kindly help in this regard that where i am lacking the logic.
最满意答案
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>
将display none添加到所有信息div
单击时将隐藏类添加到所有信息div
从目标div中删除类hide以显示目标div
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>
Add display none to all information div
Add hide class to all information div on click
Remove the class hide from the target div to show the target div
更多推荐
<div,class,id,电脑培训,计算机培训,IT培训"/> <meta name="description&
发布评论