jQuery在切换时隐藏Div

时间:2014-10-26 02:35:50

标签: jquery

我正在使用此代码隐藏并显示由两个不同按钮

触发的两个单独的隐藏div

JQUERY

 jQuery("#flip4").click(function(){
    jQuery("#panel4").slideToggle("slow");
  });

 jQuery("#flip6").click(function(){
    jQuery("#panel6").slideToggle("slow");
  });

CSS

#panel4 {padding:30px 20px;background-color:#000;display:none;width:460px;height:175px;margin:8px 0 0 -475px;z-index: 10000;position:absolute;box-shadow: 3px 5px 5px #0D0D0D;border-radius:3px;color:#F1F1F1;}

#panel6 {padding:30px 20px;background-color:#000;display:none;width:420px;height:45px;margin: 0 0 0 418px;z-index: 10000;position:absolute;box-shadow: 3px 5px 5px #0D0D0D;border-radius:3px;color:#F1F1F1;top: 94px;}

HTML

<div id="flip4"><a id="vphone" href="#"></a></div>

<div id="flip6"><a id="vemail" href="#"></a></div>

我遇到的问题是我不希望在任何时候两个div一起显示。即如果flip4可见且用户点击flip6,则jquery需要隐藏flip4

1 个答案:

答案 0 :(得分:1)

有很多不同的方法来处理这个问题,根据您正在寻找的确切功能,您应该尝试以下两种方法之一:

 jQuery("#flip4").click(function(){
    jQuery("#panel4").slideToggle("slow");
    jQuery("#panel6").slideUp("slow");
  });

 jQuery("#flip6").click(function(){
    jQuery("#panel4").slideToggle("slow");
    jQuery("#panel6").slideUp("slow");
  });

OR:

 jQuery("#flip4").click(function(){
    jQuery("#panel4").slideToggle("slow",function(){
        jQuery("#panel6").slideUp("slow");
    });
  });

 jQuery("#flip6").click(function(){
    jQuery("#panel4").slideToggle("slow",function(){
        jQuery("#panel6").slideUp("slow");
    });
  });