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属性。

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

3 个答案: