0

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

这是我的代码：

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

4 回答 4

3

我更改了一些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;       
    }
于 2013-08-08T18:19:56.707 回答
1

您可以使用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();
    }
});

检查小提琴

于 2013-08-08T18:13:13.083 回答
0

只是改变一些东西。

首先，将您的事件侦听器放在准备好的文档中：

$(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;
}

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

于 2013-08-08T18:05:21.923 回答
0

我创建了您的代码的工作版本的小提琴，但是我没有使用 slideToggle，而是使用 animate 为页脚的高度设置动画，并在用户停止将鼠标悬停在 div 上时使其缩小。

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

演示

于 2013-08-08T18:06:19.310 回答