Question

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

如何通过固定定位来完成这项工作？

要显示/隐藏的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>

仅供参考：职位：修复; css适用于STICKYFOOTER div

Answer 1

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

Answer 2

您可以尝试提供持续时间参数吗？

像这样：

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

Answer 3

如果可以，将位置从#stickyfooter移动到.slidingDiv，或者在#stickyfooter中创建一个你隐藏/显示的新元素。

在固定定位div上隐藏/显示Jquery的问题

3 个答案: