1

我想将动态生成的 div 直接放在按钮上方（页面较高，而不是 Z-index）。单击按钮时，我想用反向 jQuery 显示 div slideToggle()。

我在小提琴中设置了一个示例：http: //jsfiddle.net/sablefoste/YWnJE/30/

我很接近，但我似乎无法将显示定位在按钮的正上方。在http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/position:absolute; left:0;bottom:0; 中的第一个示例之后，我可以使用我的 CSS 让它向上滑动。

如果我将其更改left:0; bottom:0;为其他内容，我可以正确定位它，直到调整浏览器窗口的大小。

有没有办法在没有蛮力的情况下做到这一点（特别是，识别 的顶部#storiesbutton，以及 jQuery 重新定位 的底部#storylist）？

我很感激任何想法！谢谢！

4

4 回答 4

1

因此，当您放置position: absolute该元素时，您所做的是根据它的第一个非静态祖先将其定位为一组固定的像素。在大多数情况下，在这种情况下，那将是身体本身，这就是它被卡在底部的原因。您要做的是将绝对定位的元素限制在另一个 div 中，以便它不会定位在页面底部，而是定位在您想要的位置。因此，您只需包装该元素：

<div id="wrapper">
    <div id="storylist" style="display:none;">
      <ul>
           <li>
             Title 1 goes here.
           </li>
           <li>
             Title 2 goes here.
           </li>
           <li>
             Maybe a Title 3 goes here, but it is dynamically generated.
           </li>
      </ul>
    </div>
</div>

在另一个 div 中，并给那个新的 div

#wrapper{
   position: relative;   
}

这是小提琴中的示例。

于 2012-12-15T03:34:58.167 回答
1

我在这里进行纯粹的猜测，但我的意思是您希望菜单出现在按钮上方。我试过用

var list = $('#storylist'),
    button = $('#storiesbutton'),
    speed = 500;

list.hide().css('bottom', button.css('top'))
    .css('margin-top', list.outerHeight() * -1);

因此，故事的位置是根据按钮的位置和列表的高度在加载时设置的。

小提琴：http: //jsfiddle.net/qt3LE/

就像我说的那样，我不是 100% 相信你所追求的。这可能有助于定位。

我也使用$.toggle(function(){}, function(){})了 toggleSlide，因为您可以更好地控制各个切换。

于 2012-12-15T03:40:50.403 回答
0

我不确定，但如果您正在寻找按钮上方的信息，您可以尝试删除position:absolute

像这样 http://jsfiddle.net/cjds/AnpzK/

于 2012-12-15T03:14:12.110 回答
0

将按钮栏和故事情节放在这样的容器中：

<div id="container">
<div id="storylist">
  <ul>
       <li>
         Title 1 goes here.
       </li>
       <li>
         Title 2 goes here.
       </li>
       <li>
         Maybe a Title 3 goes here, but it is dynamically generated.
       </li>
  </ul>
</div>

<div class= "buttonbar">
  <div>
    <span class="navbutton" id="librarybutton" >
        <a href ="#" title="Information">
            Information
        </a>
    </span>
    <span class="navbutton" id="storiesbutton" >
        <a href ="#">
            Stories
        </a>
    </span>
  </div>
</div>

​</p>

这是他们的CSS：

#container {
position:relative;
background:#efefef;
}
#storylist{
height:60px;
position:absolute;
left:0;
bottom:0;
}
.buttonbar{
margin:20px 50px 20px 0;    
text-align:center;
width:100%;
position:absolute;
bottom:-60px;
}

我已经绝对定位了按钮栏和故事情节，因此您可以获得所需的“向上滑动”动作。希望这是你想要的。这是我所做的事情。http://jsfiddle.net/YWnJE/41/

于 2012-12-15T03:41:18.023 回答