问题与隐藏/显示Jquery固定位置的div [英] Issue with Hide / Show Jquery on fixed positioned div

问题描述

我在网页/视点底部有一个粘性页脚，以及应该隐藏/显示菜单的可点击链接切换菜单。问题是，我不能得到隐藏的菜单，我已经拾起，问题在要隐藏/显示的元素的CSS。它是固定的位置{position：fixed;} ...当我删除固定出来，然后菜单的隐藏和显示工作100％，但显然菜单不再在浏览器的底部。

I've got a sticky footer at the bottom of the webpage / viewpoint as well as clickable link "toggle menu" that SHOULD hide / show the menu. Problem is that I can't get the menu to hide and I've picked up that the problem lies within the CSS of the element that is supposed to hide / show. It's the fixed position {position:fixed;} ... When I remove "fixed" out, then the hide and showing of the menu works 100% but obviously the menu is no longer at the bottom of the browser.

如何使用固定位置工作？

How can I get work this with the fixed positioning?

Javascript显示/隐藏像： / p>

Javascript to show/hide goes like:

<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：位置： css适用于STICKYFOOTER div

FYI: The position:fix; css applies to the STICKYFOOTER div

推荐答案

如果你隐藏stickyfooterdiv而不是容器，容器将始终是固定的（并显示），但是当您隐藏内容时，它将没有显示任何内容。

what if you hide the "stickyfooter" div, instead of the container?That way, the container will always be fixed (and shown), but when you hide the content, it will have nothing shown in it.

这篇关于问题与隐藏/显示Jquery固定位置的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！