固定位置Div上的Hide / Show Jquery问题

Question

我有一个粘性页脚，在网页/视口底部以及可点击的“切换菜单”链接，应该隐藏/显示菜单。问题是我无法让菜单隐藏，我发现问题在于应该隐藏/显示的元素的CSS中。它是固定位置{position:fixed;}...当我删除“fixed”时，菜单的隐藏和显示就可以完美地工作，但显然菜单不再位于浏览器底部。

如何使用固定定位使其正常工作？

用于显示/隐藏的Javascript如下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" 
type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

    $(".slidingDiv").show();
    $(".show_hide").show();

$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});

});

</script>

HTML的语法如下：

<div id="stick_footer_title"><a class="show_hide" href="#">Toggle Menu
 &#x25BC;</a></div>
<div class="slidingDiv">
<div id="stickyfooter">

<ul id="footer_menu"> 
    <li class="imgmenu"><a href="#"></a></li>

    <li><a href="#intro">Intro</a></li>
    <li><a href="#photos">Photos</a></li>

</ul>
</div>
    </div>

FYI：position:fix; CSS适用于STICKYFOOTER div。

- MSchumacher

---

你尝试过在 position: fixed 的页脚内添加一个 position: relative 容器吗？ - Wex

Answer 1

如果你隐藏“stickyfooter” div，而不是容器，会怎样呢？这样，容器将始终固定（并显示），但当你隐藏内容时，它将没有任何显示的内容。

- Erenor Paz

---

太棒了，这个方法奏效了！ :) 我仍然不确定为什么它有效，因为除了将隐藏/显示的 JavaScript 应用于另一个仍具有固定定位的 div 外，似乎没有任何区别。无论如何，最重要的是它奏效了！感谢你的帮助，伙计！ - MSchumacher

我不知道为什么，但我也遇到了同样的问题，并使用了这个解决方法 :) - Erenor Paz

简单的答案总是最好的。 - Modika

Answer 2

你能尝试添加持续时间参数吗？

像这样：

$(".slidingDiv").slideToggle("slow");

- David Cheung

---

我还没有一个持续时间参数，不过在解决我的问题之后，我打算添加一个（就是你上面提到的那个）。你是说我必须尝试添加一个吗？ - MSchumacher

我按照上述提到的方式添加了参数（无论如何都需要，而且效果更好），但我仍然需要在我的问题上得到帮助... - MSchumacher

Answer 3

如果可以的话，将固定位置从#stickyfooter移动到.slidingDiv，或在#stickyfooter内创建一个新元素，您将隐藏/显示该元素。

- LouD