hide div A如果div B顯示

我寫簡單的腳本來使用jquery彈出快速信息。當用戶點擊視圖時，某些信息將顯示使用toggle（），並在用戶再次點擊時隱藏。這個腳本將循環10次。hide div A如果div B顯示

但問題是我想這個彈出只顯示一次，其餘的將隱藏，現在當用戶點擊視圖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>

* 林不知道如何將這個腳本功能於一體

來源

2013-02-13 rusly

概念來做到這一點的是：指定一個通用類全部彈出，說 - 類=「彈出」，現在當我點擊任何一個，做一個$（'。popup'）。hide（）first and do a $（'＃specific_id_associated_to_this'）。show（）; – 2013-02-13 06:58:21

下面結合是您working demo

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

來源

2013-02-13 06:56:08 Dipak

和一個小的進化：http://jsfiddle.net/LLLjx/12/ – r043v 2013-02-13 07:02:15

@ r043v好的進化！謝謝！ – Dipak 2013-02-13 07:03:43

謝謝@ r043v你的演示很簡單..實際上這個盒子是動態的，並將循環直到100次（即時通訊使用PHP）.. – rusly 2013-02-13 07:26:32

使用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

來源

2013-02-13 06:56:20 bipen

應該是：

前$(".box_1").toggle();這個隱藏$(".box_2").hide();和$(".box_2").toggle();在此之前隱藏$(".box_1").hide();

這樣的作品。

來源

2013-02-13 06:57:13

嗨使用下面的代碼，

<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>

希望這能解決你的問題

來源

2013-02-13 06:58:54 AmGates

切換也有，你可以使用它的回調函數。

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

來源

2013-02-13 07:00:22

試試這個：

<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); 
    }); 
});

來源

2013-02-13 07:10:04 kufudo

hide div A如果div B顯示

回答

相關問題