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

如果显示div B，则隐藏div A.

6 个答案: