jquery - 在 Jquery 中显示/隐藏 div 问题

Question

我从另一个网站复制了 Jquery 代码，“Link one”工作正常。当我按下它时，会出现一个弹出 div，当我在 div 之外单击它时它就消失了（这很好）。但是“链接二和三弹出 div”没有正确出现/消失。你能增强代码吗？请查看下面的链接（到目前为止我所做的）

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

另外请确保，即使我按“链接二”或“链接三”，一次也只出现一个 div</p>

非常感谢您的帮助！

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 的锚点添加了一个数据属性

检查演示

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

当您使用 -> $("a.cart-buttom").click 将 click 事件绑定到类 cart-buttom 的标签时，您只需将指定的事件（如您解释的那样出现/消失）仅提供给类购物车-buttom，但不是 cart-buttom2 或 cart-buttom3。

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