JavaScript调用显示隐藏方法

JavaScript calling show hide methods

本文关键字：方法 隐藏 显示 调用 JavaScript      更新时间：2023-09-26

我是一个完全的JavaScript新手，试图理解简单的东西....

请查看下面的完整代码。很简单，显示和隐藏。我正在做一些错误的事情，由于它不工作。

http://jsbin.com/esokic/edit javascript、html、生活

感谢您的帮助。

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

你从来没有真正调用init()，所以你的点击处理程序从来没有被应用。

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

尝试:

<>之前 $(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(); }); });

问题在这一行:

this.init=function(){

你想要的不是定义一个init函数，而是一个文档。准备好处理程序，所以

$(document).ready(function(){

，然后在代码块的末尾有:

};

您需要关闭上面打开的对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

相关文章：