hide div A如果div B显示

Question

我写简单的脚本来使用jquery弹出快速信息。当用户点击视图时，某些信息将显示使用toggle（），并在用户再次点击时隐藏。这个脚本将循环10次。

但问题是我想这个弹出只显示一次，其余的将隐藏，现在当用户点击视图1和视图2时，所有弹出窗口将同时显示。

您可以检查我的jsfiddle click here

<script> 
    $(document).ready(function() { 
     $("#view_1").click(function(e) { 
      e.stopPropagation(); 
      $(".box_1").toggle(); 
     }); 
     $(document).click(function() { 
      var $el = $(".box_1"); 
      if ($el.is(":visible")) { 
       $el.fadeOut(200); 
      } 
     }); 
    }); 
</script> 

* 林不知道如何将这个脚本功能于一体

Answer 1

下面结合是您working demo

$("a").click(function() { 
     $('.contact_box').hide(); 
     $(this).next('div').show(); 
}); 

Answer 2

使用hide()隐藏你的对应盒子..

$("#view_1").click(function(e) { 
     e.stopPropagation(); 
    $(".box_2").hide(); <-----here 
     $(".box_1").toggle(); 
    }); 

$("#view_2").click(function(e) { 
     e.stopPropagation(); 
     $(".box_1").hide();<-----here 
     $(".box_2").toggle(); 
    }); 

小提琴here

Answer 3

应该是：

前$(".box_1").toggle();这个隐藏$(".box_2").hide();和$(".box_2").toggle();在此之前隐藏$(".box_1").hide();

这样的作品。

Answer 4

嗨使用下面的代码，

<script> 
    $(document).ready(function() { 
     $("#view_1").click(function(e) { 
      e.stopPropagation(); 
      $(".box_1").toggle(); 
    var $el = $(".box_2"); 
      if ($el.is(":visible")) { 
       $el.fadeOut(200); 
      } 
     }); 
     $(document).click(function() { 
      var $el = $(".box_1"); 
      if ($el.is(":visible")) { 
       $el.fadeOut(200); 
      } 
     }); 
    }); 
</script> 

希望这能解决你的问题

Answer 5

切换也有，你可以使用它的回调函数。

$(".box_1").toggle('slow', function() { 
    // show hide code or fadeIn fadeOut or other animation 
    $(".box_2").fadeOut('fast'); 
});

Answer 6

试试这个：

<div style="position:relative"> 
    <a style="cursor: pointer" id="view_1" class="my_view">View 1</a> 

    <div class="contact_box box_1 content_box" style="display: none;"> 
     <div class="left" style="width:150px; margin-right:10px;"> 
      <img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg" 
      style="max-width:150px" /> 
     </div> 
     <div class="contact_info left" style="width:250px"> 
      <div class="company_name">DIV A</div> 
      <table width="100%" border="0" class="table_contact"> 
       <tr> 
        <td width="29">Name</td> 
        <td>: Jenson Button</td> 
       </tr> 
       <tr> 
        <td style="padding-right:0px">Phone</td> 
        <td>: 012-66558741</td> 
       </tr> 
       <tr> 
        <td style="padding-right:0px">Email</td> 
        <td>: [email protected]</td> 
       </tr> 
      </table> 
     </div> 
</div> 
</div> 

<br> 
<br> 
<div style="position:relative"> 
    <a style="cursor: pointer" id="view_2" class="my_view">View 2</a> 

    <div class="contact_box box_2 content_box" style="display: none;"> 
     <div class="left" style="width:150px; margin-right:10px;"> 
      <img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg" 
      style="max-width:150px" /> 
     </div> 
     <div class="contact_info left" style="width:250px"> 
      <div class="company_name">DIV B</div> 
      <table width="100%" border="0" class="table_contact"> 
       <tr> 
        <td width="29">Name</td> 
        <td>: Jenson</td> 
       </tr> 
       <tr> 
        <td style="padding-right:0px">Phone</td> 
        <td>: 012-88542215</td> 
       </tr> 
       <tr> 
        <td style="padding-right:0px">Email</td> 
        <td>: [email protected]</td> 
       </tr> 
      </table> 
     </div> 
    </div> 
</div> 



$(document).ready(function() { 
    $('.my_view').click(function(e) { 
     $('.my_view').siblings('div').each(function(){$(this).hide()}); 
     $(this).siblings('div').toggle(); 
     e.stopPropagation(); 
    }); 
    $(document).click(function() { 
     $('.my_view').siblings('div').fadeOut(200); 
    }); 
});