Javascript 如果显示分区B，则隐藏分区A_Javascript_Jquery

Javascript 如果显示分区B，则隐藏分区A

javascript jquery

Javascript 如果显示分区B，则隐藏分区A,javascript,jquery,Javascript,Jquery,我正在编写使用jquery弹出快速信息的简单脚本。当用户单击查看时，一些信息将使用toggle（）显示，当用户再次单击时隐藏。这个脚本将循环10次但问题是，我希望这个弹出窗口只显示一次，其余的将隐藏，现在当用户单击视图1和视图2时，所有弹出窗口将同时显示你可以查看我的JSFIDLE $（文档）.ready（函数（）{ $（“#查看_1”）。单击（函数（e）{ e、停止传播（）； $（“.box_1”）.toggle（）； }); $（文档）。单击（函数（）{ 变量$el=$（“.box_

我正在编写使用jquery弹出快速信息的简单脚本。当用户单击查看时，一些信息将使用toggle（）显示，当用户再次单击时隐藏。这个脚本将循环10次

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

你可以查看我的JSFIDLE


$（文档）.ready（函数（）{
$（“#查看_1”）。单击（函数（e）{
e、 停止传播（）；
$（“.box_1”）.toggle（）；
});
$（文档）。单击（函数（）{
变量$el=$（“.box_1”）；
如果（$el.is（“：visible”））{
$el.fadeOut（200）；
}
});
});

*我不知道如何在一个函数中组合此脚本

使用

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

$（“#视图_1”）。单击（函数（e）{
e、 停止传播（）；
$（“.box_2”）.hide（）；应为：
在$（“.box_1”）.toggle（）；
此隐藏$（“.box_2”）.hide（）；
之前和$（“.box_2”）.toggle（）；
此隐藏$（.box_1”）.hide（）

这将起作用。
请使用下面的代码
<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>


$（文档）.ready（函数（）{
$（“#查看_1”）。单击（函数（e）{
e、 停止传播（）；
$（“.box_1”）.toggle（）；
变量$el=$（“.box_2”）；
如果（$el.is（“：visible”））{
$el.fadeOut（200）；
}
});
$（文档）。单击（函数（）{
变量$el=$（“.box_1”）；
如果（$el.is（“：visible”））{
$el.fadeOut（200）；
}
});
});

希望这能解决您的问题
切换还有回调功能，您可以使用它
$(".box_1").toggle('slow', function() {
    // show hide code or fadeIn fadeOut or other animation
    $(".box_2").fadeOut('fast');
});
试试这个：
<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>: jb@gmail.com</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>: ac@gmail.com</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);
    });
});


视图1
A组
名称
：简森按钮
电话
: 012-66558741
电子邮件
: jb@gmail.com




视图2
B组
名称
：简森
电话
: 012-88542215
电子邮件
: ac@gmail.com
$（文档）.ready（函数（）{
$（'.my_view'）。单击（函数（e）{
$（'.my_view'）。兄弟姐妹（'div'）。每个（函数（）{$（this.hide（）}）；
$（this.this（'div'）.toggle（）；
e、 停止传播（）；
});
$（文档）。单击（函数（）{
$（'.my_view'）。兄弟姐妹（'div'）。淡出（200）；
});
});
这样做的概念是：为所有弹出窗口分配一个公共类，比如-class=“popup”，现在当我单击任何一个时，先做$（'.popup'）.hide（），然后做$（''specific_id_associated_to_this'）。show（）；@r043v很好的进化！谢谢你！谢谢@r043v你的演示很简单。实际上这个框是动态的，会循环100次（我正在使用php）…np，如果您得到它100次，请保存$（“.contact_box”）选择器，以避免每次单击时都找到它们
$(".box_1").toggle('slow', function() {
    // show hide code or fadeIn fadeOut or other animation
    $(".box_2").fadeOut('fast');
});
<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>: jb@gmail.com</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>: ac@gmail.com</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);
    });
});