如果再次单击，请删除活动状态

Question

我有 4 个隐藏的div 来回切换(隐藏除当前以外的所有(，并在再次单击链接时重新隐藏当前。

我设法将活动状态添加到当前单击的链接以更改链接颜色，但是当切换以重新隐藏该div 时，链接保持活动状态......仅当单击另一个链接时，活动状态才会从链接中删除，但如果再次单击当前链接，则不会从链接中删除。

有一个"点击"功能...我们需要一个"点击"大声笑！

CSS:
#div1, #div2, #div3, #div4 {
background-color: #cfe6a6;
width:100%;
display:block;
position:inherit;
padding:15px;
}
a {color:blue;}
#link1.active, #link2.active, #link3.active, #link4.active {color: #95C837;}
HTML:
<a href="#" id="link1"/>LINK 1</a>, <a href="#" id="link2"/>LINK 2</a>, <a   href="#" id="link3"/>LINK 3</a> and <a href="#" id="link4"/>LINK 4</a>
<br/>
<div id="div1" style="display:none;">DIV 1</div>
<div id="div2" style="display:none;">DIV 2</div>
<div id="div3" style="display:none;">DIV 3</div>
<div id="div4" style="display:none;">DIV 4</div>
SCRIPT:
$("#link1").on('click', function() {
$("#link1").addClass('active');
$("#div1").slideToggle();
$("#link2,#link3,#link4").removeClass('active');
$("#div2,#div3,#div4").slideUp();
});
$("#link2").on('click', function() {
$("#link2").addClass('active');
$("#div2").slideToggle();
$("#link1,#link3,#link4").removeClass('active');
$("#div1,#div3,#div4").slideUp();
});
$("#link3").on('click', function() {
$("#link3").addClass('active');
$("#div3").slideToggle();
$("#link1,#link2,#link4").removeClass('active');
$("#div1,#div2,#div4").slideUp();
});
$("#link4").on('click', function() {
$("#link4").addClass('active');
$("#div4").slideToggle();
$("#link1,#link2,#link3").removeClass('active');
$("#div1,#div2,#div3").slideUp();
});

这是我对天才的小提琴！

https://jsfiddle.net/flipflopmedia/rgt16b72/

Answer 1

您需要检查div 的可见性以了解它是打开还是关闭。例如，这样：

...
$("#link1").on('click', function(){
var xthis = this;
$("#div1").slideToggle(function(){
if($(this).is(":hidden")){
$(xthis).removeClass('active');
}else{
$(xthis).addClass('active');
}
});
...
});
...

更好的主意是通过配对项目为整个菜单创建一个功能......例如像这样：

$(".menu_item").on('click', function(){
console.log('click');
var xthis = this;
$("#"+$(xthis).attr('rel')).slideToggle(function(){
if($(this).is(":hidden")){
$(xthis).removeClass('active');
}else{
$(xthis).addClass('active');
}
});
$(".menu_item").not(xthis).removeClass('active');
$(".menu_content").not("#"+$(xthis).attr('rel')).slideUp();
});

工作示例：

https://jsfiddle.net/rgt16b72/26/

(请注意，我必须为菜单元素添加额外的标签(

Answer 2

您需要检查link是否处于活动状态，并分别添加或删除class，例如

$("a").on('click', function(){
removeOrAddClass(this);
$("#" + $(this).attr('rel')).slideToggle();
$("div").not("#" + $(this).attr('rel')).slideUp();
});

function removeOrAddClass(el) {
if ($(el).hasClass('active')) {
$(el).removeClass('active');
}
else {
$(el).addClass('active');
}
$('a').not(el).removeClass('active');
}

#div1, #div2, #div3, #div4 {
background-color: #cfe6a6;
width:100%;
display:block;
position:inherit;
padding:15px;
}
a {color:blue;}
#link1.active, #link2.active, #link3.active, #link4.active {color: #95C837;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="link1" rel="div1"/>LINK 1</a> 
<a href="#" id="link2" rel="div2"/>LINK 2</a> 
<a href="#" id="link3" rel="div3"/>LINK 3</a> and ...
<a href="#" id="link4" rel="div4"/>LINK 4</a>
<br/>
<div id="div1" style="display:none;">DIV 1</div>
<div id="div2" style="display:none;">DIV 2</div>
<div id="div3" style="display:none;">DIV 3</div>
<div id="div4" style="display:none;">DIV 4</div>

Answer 3

在这里，您可以使用解决方案 https://jsfiddle.net/rgt16b72/30/

$("a").on('click', function() {
if ($(this).hasClass('active')){
$(this).removeClass('active');
$('#' + $(this).attr("targetId")).slideUp();
} else {
$(this).addClass('active')
.siblings('a').removeClass('active');
$('#' + $(this).attr("targetId")).slideToggle()
.siblings('div').slideUp();
}
});

#div1, #div2, #div3, #div4 {
background-color: #cfe6a6;
width:100%;
display:block;
position:inherit;
padding:15px;
}
a {color:blue;}
#link1.active, #link2.active, #link3.active, #link4.active {color: #95C837;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="link1" targetId="div1"/>LINK 1</a>, <a href="#" id="link2" targetId="div2"/>LINK 2</a>, <a href="#" id="link3" targetId="div3"/>LINK 3</a> and <a href="#" id="link4" targetId="div4"/>LINK 4</a>
<br/>
<div id="div1" style="display:none;">DIV 1</div>
<div id="div2" style="display:none;">DIV 2</div>
<div id="div3" style="display:none;">DIV 3</div>
<div id="div4" style="display:none;">DIV 4</div>

切勿出于同一目的使用多个方法，而应使用不同的参数或 HTML 属性。