Question

我需要向上方向制作一个jquery slidetoggle效果。现在幻灯片切换仅在向下方向上工作。当我使用向上滑动方法时，我无法使用相同的按钮向上滑动并向下滑动div。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11/jquery.min.js">              </script>
<script> 
$(document).ready(function(){
 $("#flip").click(function(){
  $("#panel").slideToggle("slow");



 });
});
</script>

<style> 
#panel,#flip
{

padding:5px;
text-align:center;
height:92px;
width:261px;
opacity:0.8;
background-color:#b3171d;

}

 #panel
{
padding:50px;
background:url(maharani%20html/images/prince.jpg) no-repeat;
width:262px;
height:248px;

}
</style>
</head>
<body>

<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>

 </body>
</html>

我是jquery的初学者。请帮助我:)。

Answer 1

尝试以下代码这是 JSFIDDLE

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">                 </script>
    <script>
    $(document).ready(function(){
     $("#flip").click(function(){
      $("#panel").slideToggle({
      direction: "up"
    }, 400);

 });
});
</script>
<style> 
#panel,#flip
{

position:absolute;
  bottom:0;
  width: 50%;
  padding-bottom:2%;
  z-index: 100;
opacity:0.8;
background-color:#b3171d;
}
 #panel
{
    display: none;
padding:50px;
background:url(maharani%20html/images/prince.jpg) no-repeat;
width:262px;
height:248px;

}
</style>
</head>
<body>
    <div>
    <div id="panel">Hello world!</div>
    </div>
    <div id="flip">Click to slide up panel</div>

 </body>
</html>

jquery SlideToggle效果向上？

1 个答案: