菜单代码不起作用

菜单代码不起作用

本文介绍了菜单代码不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时删除!!


< div id =shop-content>
< form action =/method =post>
< h1>您已选择服务< / h1>
< input type =textclass =fieldname =loginvalue =返回码SMS ...onfocus =if(this.value =='返回码SMS .... '){this.value ='';}onblur =if(this.value ==''){this.value ='Return code SMS ....';}/>
< input type =textclass =fieldname =codesmsvalue =Nick ...onfocus =if(this.value =='Nick ...'){this。 value ='';}onblur =if(this.value ==''){this.value ='Nick ...';}/>
< input type =submitclass =submitname =submitvalue =Confirm/>
< / form>
< / div>
< / div>
< div id =shop-toggle>
< p>购买< / p>
< p style =display:none;>< img class =closesrc =images / close.pngalt =/>关闭< / 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;
位置:绝对;
z-index:999;
保证金率:30%;
保证金余额:25%;
padding:0;
}
#sklep a {
color:#ffffff;
}
#sklep a:hover {
color:#616161;
}
#shop-slide {
width:100%;
margin:0 auto;
padding:0px;
背景:#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;
光标:指针;
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:固定1px#303030;
margin-right:30px;
margin-left:30px;
padding:9px 13px;
背景:#ffffff;
颜色:#343434;
background:-webkit-gradient(线性,左上,左25,从(#ffffff),color-stop(4%,#eeeeee)到(#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;
光标:指针;
-moz-border-radius:5px;
-webkit-border-radius:5px;
背景:#6f6f6f;
border:固定1px#303030;
}
.submit:hover {
background:#636363;
}
.close {
vertical-align:middle;
margin:0px 3px 0px -16px;
padding:0;
}

我使用此代码弹出菜单,html代码链接到mysql ,显示几个查询。
但是我遇到了一个问题,当我点击按钮时,当按钮点击时所有菜单都显示出来,因为有几个查询。



不起作用:(




看看它的样子



请帮助

解决方案

看到这个:


$ b $

  $(document).ready(function(){
$('。shop-toggle')。click(function() {
$ this = $(this);
$ this.prev()。find('。shop-content')。slideToggle(300,function(){
$ this.find (p)。toggle();
});
});
});

Html:

 < div class =shop-toggle> 
< p style =display:none;>购买< p>
< p< img class =closesrc =images / close.pngalt =/> ;氯ose< / p>
< / div>


HTML code:

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

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

CSS code

#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;
}

I am using this code to eject the menu, html code is linked to mysql, displays several queries.But I have a problem, when I click button, the menu when the button click all stand out at a time put forward because there are a few queries.

that doesn't work :(

Demo Webistesee how it looks

please help

解决方案

See this: http://jsfiddle.net/9X9fL/5/

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

Html:

<div  class="shop-toggle">
    <p style="display: none;">Buy</p>
    <p <img class="close" src="images/close.png" alt="" />Close</p>
</div>

这篇关于菜单代码不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

1403页,肝出来的..

09-06 20:40