代码菜单不起作用

时间:2013-03-19 17:56:14

标签: javascript jquery html

抱歉我的英文,

我有这个HTML代码:

<div id="shop-slide">
    <div  id="shop-content">
           <form action="/" method="post">
           <h1>You have selected services</h1>
              <input type="text" class="field" name="login" value="Return code SMS..." onfocus="if (this.value == 'Return code SMS....') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Return code SMS....';}" />
              <input type="text" class="field" name="codesms" value="Nick ..." onfocus="if (this.value == 'Nick ...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Nick ...';}" />
              <input type="submit" class="submit" name="submit" value="Confirm" />
            </form>
    </div>
</div>
<div  id="shop-toggle">
    <p>Buy</p>
    <p style="display: none;"><img class="close" src="images/close.png" alt="" />Close</p>
</div>

接下来,我有一个jQuery代码

$(document).ready(function(){
$('#shop-toggle').click(function() {
$('#shop-content').slideToggle(300,function(){
$("#shop-toggle p").toggle();
    });
  });
});

Css代码

    #sklep {
    width: 50%;
    top: 0;
    position: absolute;
    z-index: 999;
    margin-right:30%;
    margin-left: 25%;
    padding: 0;
}

#sklep a {
   color: #ffffff;
}

#sklep a:hover {
   color: #616161;
}

#shop-slide {
    width: 100%;
    margin: 0 auto;
    padding: 0px;
    background: #3b3b3b;
    border-bottom: 1px solid #ffffff;
}

#shop-content {
    width: 290px;
    height: auto;
    margin:  auto ;
    padding: 13px;
    display: none;
}

#shop-content p {
    margin: 0;
    padding: 0;
}

#shop-toggle {
    width: 174px;
    height: 41px;
    background: url(images/btn.png) no-repeat;
    margin: 0 auto;
    padding: 0;
    z-index: 999;
    text-align: center;
    color: #ffffff;
    text-shadow: 1px 1px 1px #a20b1b;
    line-height: 37px;
    font-weight: bold;
    cursor: pointer;
    display: block;
    text-decoration: none;
}

.sklep-toggle:hover {
    color: #41070d;
    text-shadow: 1px 1px 0px #ee4557;
}   

.sklep-toggle p {
    margin: 0;
    padding: 0;
}

.field {
    width: 200px;
    border: solid 1px #303030;
    margin-right: 30px;
    margin-left: 30px;
   padding: 9px 13px;
    background: #ffffff;
    color: #343434;
    background: -webkit-gradient(linear, left top, left 25, from(#ffffff), color-stop(4%, #eeeeee), to(#ffffff));
    background: -moz-linear-gradient(top, #ffffff, #eeeeee 1px, #ffffff 25px);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;

}

.submit {
    width: 120px;
    margin-left: 80px;
    padding: 8px 13px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #484848;
    color: #ffffff;
    cursor: pointer;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    background: #6f6f6f;
    border: solid 1px #303030;
}

.submit:hover {
   background: #636363;
}


.close {
   vertical-align: middle;
   margin: 0px 3px 0px -16px;
   padding: 0;
}

此Is Code用于弹出菜单,html代码链接到mysql,显示多个查询。 但我有一个问题,当点击按钮时,按钮点击时的菜单一次突出,因为有一些查询。

不起作用:(

Demo Webiste 看看它看起来如何

jsfiddle 请帮忙

感谢您的建议:)

0 个答案:

没有答案