Question

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

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

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

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

有没有办法在没有暴力的情况下做到这一点（具体来说，确定#storiesbutton的顶部，jQuery重新定位#storylist的底部）？

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

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

Here's the example in a fiddle.

Answer 2

我在这里进行纯粹的猜测，但我的想法是你希望菜单出现在按钮上方。我已经尝试过使用

了

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，因为您可以更好地控制各个切换。

Answer 3

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

喜欢这个 http://jsfiddle.net/cjds/AnpzK/

Answer 4

将按钮栏和故事情节放在如下容器中：

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

以下是他们的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/

向上滑动div的CSS位置

4 个答案: