菜单代码不起作用 [英] Menu Code doesn't work
本文介绍了菜单代码不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< 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 ，显示几个查询。
但是我遇到了一个问题，当我点击按钮时，当按钮点击时所有菜单都显示出来，因为有几个查询。
不起作用：（
） 演示网站
看看它的样子
请帮助
解决方案
看到这个： http://jsfiddle.net/9X9fL/5/
$ 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 Webiste see 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>
这篇关于菜单代码不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
