Question

我从其他网站复制了Jquery代码，“Link one”工作正常。当我按下它时，会出现一个弹出式div，当我点击div之外它就消失了（这很好）。但是“Link Two and Three popup div”没有正确显示/消失。你能加强代码吗？请查看下面的链接（到目前为止我做了什么）

http://jsfiddle.net/awaises/SNCtu/

另外请确保，即使按下“Link Two”或“Link Three”，也只会出现一个div

真的很感谢你的帮助！

Answer 1

试试此代码

$(function() {
    $('#hidden1').hide().click(function(e) {
        e.stopPropagation();
    });
    $("a[class^='cart-buttom']").click(function(e) {
        var $cls = $(this).data('class');
        $("[id^='hidden']").not('#' + $cls).fadeOut();
        $('#' + $cls).animate({
            opacity: "toggle"
        });
        $("#shopping-cart").animate({
            "height": "toggle"
        }, {
            duration: 550
        });
        e.stopPropagation();
    });

    $(document).click(function() {
        $('#hidden1').fadeOut();
        $('#hidden2').fadeOut();
        $('#hidden3').fadeOut();
    });
});

我已将数据属性添加到存储相应div id

的锚点

CHECK DEMO

Answer 2

试试这个更短的演示 http://jsfiddle.net/vERmV/

休息希望它符合原因:)

<强>码

$(function() {
    $('#hidden1,#hidden2,#hidden3').hide().click(function(e) {
        e.stopPropagation();
    });
    $(".cart-buttom1,.cart-buttom2,.cart-buttom3").click(function(e) {

        var id = $(this).attr('class').replace(/cart-buttom/, '');

        $('.popup').hide()
        $('#hidden' + id).animate({
            opacity: "toggle"
        });

        e.stopPropagation();
    });

    $(document).click(function() {
        $('#hidden1,#hidden2,#hidden3').fadeOut();
    });
});

Answer 3

以下是您正在寻找的更简单的演示。

演示：http://jsfiddle.net/5NEu3/273

http://jsfiddle.net/5NEu3/276/

<div id="nav">
    <a href="#content1">Show content 1</a>
    <a href="#content2">Show content 2</a>
    <a href="#content3">Show content 3</a>
</div>

<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>

//In Document.Ready
$("#nav a").click(function(e){
    e.preventDefault();
    $(".toggle").fadeOut();
    var toShow = $(this).attr('href');
    $(toShow).fadeIn();
});

Answer 4

将click事件绑定到类cart-buttom的标记时使用 - ＆gt; $（ “a.cart-BUTTOM”）。点击你只将你指定的事件（如你所解释的那样出现/消失）仅提供给类 - cart-buttom，但不提供cart-buttom2或cart-buttom3。

因此，您可以从这个解释中猜测，html中具有任何字符作为后缀的类的标识符将变成完全不同的类。为了也为它们绑定click事件，您可以分别为cart-buttom2和cart-buttom3类定义不同的click事件。当然有更明智的方法来做这样的事情。

在Jquery中显示/隐藏div问题

4 个答案: