Question

我是JavaScript的新手，试图理解简单的事情......

请查看下面的完整代码。它很简单，显示和隐藏。我做错了，因为它不起作用。

http://jsbin.com/esokic/edit#javascript,html,live

非常感谢任何帮助..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Close</title>
<SCRIPT type="text/javascript" src="jquery.all.min.js"></SCRIPT>

<style type="text/css">
.header-nav-outer {
    float: left;
}
.get-daily-alerts-outer {
    background: rgb(161, 8, 8); border-width: 0px 2px 2px; border-style: solid; border-color: rgb(0, 0, 0); padding: 2px 10px 20px 20px; border-radius: 0px 0px 8px 8px; width: 477px; height: 88px; display: none; position: absolute; z-index: 1000; -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px;
}
span.close {
    background: url("/img/snapdeal/sprite/snapdeal.png?v=1") no-repeat -674px -748px; padding: 1px 0px 1px 16px; color: rgb(255, 255, 255); font-size: 10px; cursor: pointer;
}
.get-daily-alerts-head {
    color: rgb(224, 220, 220); padding-bottom: 10px; font-size: 19px; font-weight: bold;
}
.get-daily-alerts-head span {
    font-size: 13px; font-weight: normal;
}
.header-top-nav {
    background: url("/img/snapdeal/sprite/snapdeal-x.png?v=1") repeat-x left -73px; margin: 0px 0px 3px 170px; width: 592px; height: 32px; overflow: hidden;
}
.get-deal-alerts {
    background: url("/img/snapdeal/sprite/snapdeal.png?v=1") no-repeat -565px -803px rgb(161, 8, 8); padding: 3px 5px; width: 115px; color: rgb(255, 255, 255); font-size: 11px; float: left; cursor: pointer; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px;
}
.csupport-drop-outer {
    float: right;
}
.csupport-drop {
    width: 120px !important; display: block;
    text-align: left;
    color: #C7C5C5;
    font-size: 11px;
    font-weight: normal;
    cursor: pointer;
}
span.selected-city {
    background: url("/img/snapdeal/sprite/snapdeal.png?v=1") no-repeat right 3px; padding-right: 20px;
}
.cust-support-outer {
    margin: 0px; width: 121px; height: auto;
    background: rgb(255, 255, 255); border-width: 0px 2px 7px; border-style: solid; border-color: rgb(0, 0, 0); margin: 0px; padding: 5px 2px; position: absolute; z-index: 1000 !important; border-radius: 0px 0px 7px 7px; -moz-border-radius: 0 0 7px 7px; -webkit-border-radius: 0 0 7px 7px;

}

ul.cust-support {
    background: rgb(255, 255, 255); list-style: none; margin: 0px; padding: 0px; color: rgb(94, 94, 94); font-size: 12px;
}
ul.cust-support li {
    margin-top: 1px;
    margin-right: 5px;
    border-bottom-color: #888484;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
}
ul.cust-support li a {
    list-style: none;
    margin: 0px 0px 1px;
    padding: 3px;
    color: #5E5E5E;
    font-size: 12px;
    display: block;
    cursor: pointer;
    _cursor: hand;
}
.active-drop-tab {
    background: rgb(255, 255, 255); border-width: 2px 2px 0px; border-style: solid; border-color: rgb(0, 0, 0); color: rgb(51, 176, 212); cursor: default; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0;
}

</style>
<script type="text/javascript">
this.init=function(){
    $(".csupport-drop").click(function(){
        $(".csupport-drop").addClass("active-drop-tab");
        $(".cust-support-outer").show();
        return false
    });
    $(".close").click(function(){
        $(".get-daily-alerts-outer").hide();
        return false
    });
    $(".get-deal-alerts").click(function(){
        $(".get-daily-alerts-outer").show();
        return false
    });
};
</script>
</head>

<body>
    <DIV class="header-nav-outer">
        <DIV class="get-daily-alerts-outer">
            <DIV align="right"><SPAN class="close">Close</SPAN></DIV>
            <DIV class="get-daily-alerts-head">Get The Best Deals <SPAN>Everyday in your 
            mailbox</SPAN></DIV>
        </DIV>
        <DIV class="header-top-nav">
            <DIV class="get-deal-alerts">Get daily deal alerts</DIV>
            <DIV class="csupport-drop-outer">
                <DIV class="csupport-drop"><SPAN class="selected-city">Customer 
                    Support</SPAN></DIV>
                <DIV class="cust-support-outer" style="display:none;">
                <UL class="cust-support">
                    <LI><A><SPAN id="orderStatus">Order Status</SPAN></A></LI>
                    <LI><A><SPAN id="voucherResend">Resend Voucher</SPAN></A></LI>
                    <LI><A href="http://www.snapdeal.com/info/contactus" target="_blank">Contact 
                        Us</A></LI></UL></DIV>
        </DIV>
    </DIV>
</body>

</html>

Answer 1

您实际上从未致电init()，因此您的点击处理程序永远不会被应用。

$(function() { init(); });

Answer 2

尝试：


$(document).ready(function() {
    $(".csupport-drop").click(function() {
        $(this).addClass("active-drop-tab");
        $(".cust-support-outer").show();
    });
    $(".close").click(function(){
        $(".get-daily-alerts-outer").hide();
    });
    $(".get-deal-alerts").click(function(){
        $(".get-daily-alerts-outer").show();
    });
});

Answer 3

问题在于这一行：

this.init=function(){

你想要的不是定义init函数而是document.ready处理程序，所以

$(document).ready(function(){

然后在你所拥有的代码块的末尾：

};

您需要关闭上面打开的ready(来电，所以：

});

或者只是保留现有代码并添加一个单独的document.ready处理程序来调用init函数：

$(document).ready(init);

// OR, if you need to do other things in your document ready:
$(document).ready(function() {
   // other stuff here
   init();
   // other stuff here
}

更新了演示：http://jsbin.com/esokic/6/edit

JavaScript调用show hide方法

3 个答案: