Question

我想用一个粘贴在页面底部的页脚悬停上滑。我设法粘住我的页脚，使其表现得像一个按钮，但它不会在悬停时向上滑动以显示页脚的内容。

这是我的代码：

<html>
<head>
<meta charset='UTF-8'>
<title>sliding footer</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>

<style>
html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

.slide { 
    border:1px solid black;
    width:100%; 
    height:150px; 
    display:none; 
    position:absolute;
    left: 0px;
    right:0px;
    bottom: 25px;   
}

.footer {
       position:absolute;
       bottom: 0px;
       height:25px;
       width: 100%;
       left: opx;
       right: 0px;
       border:1px solid black;
       display: inline-block;
       overflow: hidden;
       cursor:pointer;
           background:#FFE4E1;
    }
</style>
</head>


<body>              

<script type="text/javascript">

 $(".footer").hover(function () {
    $(this).children('.slide').slideToggle("fast");
  });

</script>

<div class="footer" > 
    Footer Button
   <div class="slide">

    <a href="#"> footer content 1</a>
    <a href="#"> footer content 2</a>
    <a href="#"> footer content 3</a>

   </div>
</div>

</body>
</html>

Answer 1

我更改了JSFIDDLE我不需要的一些css，并使它看起来略有不同。

JS：

 $(".footer").hover(function () {
    $(".slide").slideToggle("fast");
  });

HTML：

<div class="footer" > 
    <div class="slide">
        <a href="#"> footer content 1</a>
        <a href="#"> footer content 2</a>
        <a href="#"> footer content 3</a>
    </div>
    Footer Button   
</div>

CSS：

.slide { 
    border:1px solid black;
    height:125px;    
    left: 0px;
    right:0px;
    bottom: 25px;
    display: none;    
    position: absolute;
}

.footer {
       position:absolute;
       bottom: 0px;
       height:25px;
       width: 100%;       
       left: opx;       
       right: 0px;
       border:1px solid black;
       display: inline-block;       
       cursor:pointer;
       background:#FFE4E1;       
    }

Answer 2

您可以使用animate使其正常运行。

<强> CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
.slide {
    border:1px solid black;
    width:100%;
    height:auto;
    position:absolute;
    left: 0px;
}
.footer {
    position:absolute;
    bottom: 0px;
    height:20px;
    width: 100%;
    left: 0px;
    border:1px solid black;
    display: inline-block;
    overflow: hidden;
    cursor:pointer;
    background:#FFE4E1;
}

<强> JS

$(".footer").on({
    mouseover: function () {
        $(this).stop().animate({
            height : '40px'
        }, 1000);
        $('.slide').show();
    },
    mouseleave: function () {
        $(this).stop().animate({
            bottom: "0px",
            height: '25px'
        }, 1000);
        $('.slide').hide();
    }
});

<强> Check Fiddle

Answer 3

只需改变一些事情。

首先，将您的事件监听器放在文档就绪中：

$(function(){
$(".footer").hover(function () {
    $(this).children('.slide').slideToggle("fast");
});
});

否则它将无法执行任何操作，因为您在页面上.footer之前调用它。其次是一些CSS的东西：

.slide {
    height:auto;
    .slide { 
    border:1px solid black;
    width:100%; 
    height:auto; /* was 150px. */
    display:none; 
    position:absolute;
    left: 0px;
    right:0px;
    bottom: 0px;   
}

.footer {
       position:absolute;
       bottom: 0px;
       height:25px;
       width: 100%;
       left: 0px; /* was opx. */
       right: 0px;
       border:1px solid black;
       display: inline-block;
       overflow: hidden;
       cursor:pointer;
       background:#FFE4E1;
}

这样它应该可以正常工作。

Answer 4

我创建了一个代码工作版本的小提琴，但是不使用slideToggle而是使用animate来设置页脚高度的动画，并在用户停止在div上停留时缩小。

$(".footer").hover(function () {
    $(this).animate({height: 250});
}, function(){
    $(this).animate({height: 25});
});

Demo

滑动页脚

4 个答案: