Javascript 菜单代码不为'；行不通

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>

CSS代码

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

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

我用这个代码弹出菜单，html代码链接到mysql，显示几个查询。 但我有一个问题，当我点击按钮时，菜单上的按钮点击时都会脱颖而出，因为一次提出了几个查询

这是行不通的：(

看看它看起来怎么样

请帮助查看以下内容：

Html:

购买

我真的很想在这方面帮助你，你能解释一下“当按钮点击时菜单一次全部突出出来，因为有一些查询”，我无法理解发生了什么：（“html代码链接到mysql”没有意义。你调用脚本（例如PHP脚本）吗哪个调用您的数据库？嗯……这与OP posted相同。使用
.shop toggle
可以获得所有具有
class=“shop toggle”
而不是
id=“shop toggle”
的元素。您必须使用#才能获得id@pith我刚刚修复了OP.提供的中的代码。好的，对不起，我没有看到您修改了HTMLReplace
$（document）.ready（function（）{$（'.shop toggle'）。单击（function（）{$this=$（this）；$（'.shop content'）。slideToggle（300，function（）{$this.closest（“p”）.toggle（）；
，在代码中使用
$（document）。ready（function（）{$（'.shop toggle'）。单击（function（）{$this=$（this）；$（this）；$this.prev（））.find（'.shop content'）.slideToggle（300，函数（）{$this.find（“p”）.toggle（）；}）；}）；
$(document).ready(function(){
   $('.shop-toggle').click(function() {
      $this = $(this);
       $this.prev().find('.shop-content').slideToggle(300,function(){
         $this.find("p").toggle();
      });
   });
});

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