如何在某个包装器中隐藏上一个和下一个兄弟的内容,而不是在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以显示目标divfunction 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&
发布评论