0

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

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

你可以检查我的 jsFiddle点击这里

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

*我不确定如何将此脚本组合到一个函数中

4

6 回答 6

2

这是您的工作演示

 $("a").click(function() {
        $('.contact_box').hide();
        $(this).next('div').show();
 });
于 2013-02-13T06:56:08.320 回答
0

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

在这里摆弄

于 2013-02-13T06:56:20.863 回答
0

应该 ：

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

这将起作用。

于 2013-02-13T06:57:13.550 回答
0

嗨使用下面的代码，

<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-13T06:58:54.740 回答
0

Toggle 也有回调函数，你可以使用它。

$(".box_1").toggle('slow', function() {
    // show hide code or fadeIn fadeOut or other animation
    $(".box_2").fadeOut('fast');
});
于 2013-02-13T07:00:22.953 回答
0

试试这个：

<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);
    });
});
于 2013-02-13T07:10:04.267 回答