0

当页面上有一个 div 时，我可以让 div 直接向下滑动，但是一旦我在同一行上有两个+，slideDown 函数就会从右侧顶部开始向下滑动。我也尝试将它们放在单独的 div 中，但仍然存在与下面小提琴中相同的问题。

如果有人能把我推向正确的方向，那将不胜感激。

html:

<div id="panel1" class="panel">

    <!-- start of toggle div -->
    <div id="nena">
        <img src="../images/tshirt pictures/nena boys.jpg" />
            <p class="tshirtName"> sample text</p>
                <p id="show"><span style="font-family:NimbusSanDCon; font-weight:bold; font-size: 2em;">+</span></p>
    </div><!-- end of nena-->

    <div id="below">
    <p class="itemDescription">basiq tee</p>
    <p class="price">49.95</p>
    <br />
    <p class="price"> sizes</p>

    <select name="size">
  <option value="s">S</option>
  <option value="m">M</option>
  <option value="l">L</option>
  <option value="xl">XL</option>
</select><br /><br />


<p class="price"> colours</p>

    <select name="size">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="white">White</option>
  <option value="black">Black</option>
</select>

        <p id="hide"><span style="font-family:NimbusSanDCon; font-weight:bold; font-size: 2em;">-</span></p>
    </div><!-- end of below div when shown-->
    <!-- end of toggle div-->

CSS：

#nena {
    height: 160px;
    width: 100px;
    border:thin solid #DEDEDE ;
    margin-left: 10px;
    margin-right: 10px;

float: left;}

.tshirtName {
    font-family: NimbusSanDCon;
    font-weight: bold;
    font-size: 1.2em;
    padding-right: 5px;
    text-align: center;}


#below {
    background-color: #F5F5F5;
    width: 100px;
    height: auto;
    display: none;
    padding: 5px;
float: left;}

#nena img {
    width: 90px;
    margin-top: 5px;
    margin-left: 5px;}

#show {
    float: right;
    margin-right: 5px;
    }

#hide {
    float: right;
    margin-right: 5px;}

.itemDescription {
    font-family:NimbusSanDCon;
    font-weight: bold;
    font-size: 1.3em;
    color: #1c665b;
    margin-left: 5px;}

.price {
    font-family: NimbusSanDCon;
    font-weight: bold;
    margin-left: 5px;
    letter-spacing: .2em;
}

a {
    color: black;}

这是工作小提琴：http: //jsfiddle.net/jbX6p/1/

提前致谢

4

1 回答 1

1

这是为您更新的 jsfiddle http://jsfiddle.net/jbX6p/2/。您应该使用 position 属性以正确的方式定位您的元素。在这种情况下使用

.below{
   position:absolute;
    /* then position it the way you want using margin property */
}

此外，您还有多个具有相同 ID #nena、#below 等的 div。您不能这样做，这是一个很大的错误。将它们全部更改为类名。

于 2013-10-20T00:43:10.203 回答