2

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

我正在使用此代码弹出菜单，html代码链接到mysql，显示几个查询。但是我有一个问题，当我单击按钮时，由于有几个查询，当我单击按钮时菜单全部突出显示。

那行不通:(

演示网站 看看它的外观

请帮忙

4

1 回答 1

2

看到这个：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>
于 2013-03-20T11:37:06.030 回答