Javascript滑动垂直pannel切换

问题描述：

已经做了codeacademy当然http://www.codecademy.com/ru/courses/javascript-lesson-951/0?curriculum_id=4fc3018f74258b0003001f0f#!/exercises/6 - 制作垂直滑动pannel。问题是，这些codeacademy家伙没有解释如何使pannel不仅滑下来，而且滑回备份。我试图自己做，但没有取得任何成就。请帮忙。Javascript滑动垂直pannel切换

$(document).ready(function(){ 
ANIMATION_LENGTH = 400; 
$panel = $("#panel"); 
$tab = $("#tab"); 
var $isShown; 
$tab.click(function($isShown){ 
    alert($isShown); 
    if ($isShown == false) 
    {$isShown = true;} 
    else if ($isShown == true) 
    {$isShown = false;} 
    var newTop = $isShown == false ? "-180px" : "0px"; 
    var lit = {"top": newTop}; 
    $panel.animate(lit, ANIMATION_LENGTH); 
    return $isShown   
});});

CSS

#panel { 
    padding: 50px; 
    height: 100px; 
    width: 500px; 
    text-align: center; 
    font-size: 24px; 
    font-family: Arial; 
    font-weight: bold; 
    background: #EEE; 
    cursor: pointer; 
    position:absolute; 
    top: -180px; 

    -webkit-border-bottom-left-radius: 10px; 
} 

#tab { 
    position:absolute; 
    bottom: -25px; 
    right: 0px; 
    padding: 10px; 
    background: #EEE; 
    font-size: 16px; 
    text-decoration: none; 
    -webkit-border-bottom-right-radius: 10px; 
    -webkit-border-bottom-left-radius: 10px; 
}

的HTMl

<html> 
<head> 
    <title>Result</title> 
    <link type="text/css" rel="stylesheet" href="panel.css" /> 
    <script type="text/javascript" src="panel.js"></script> 
</head> 

<body> 
    <div id="panel"> 
     Awesome hidden sliding pane 
     <a href="#panel" id="tab">Click to show</a> 
    </div> 
</body>

请包括您的HTML和CSS代码。 – Lowkase

当然，虽然没有太多可以看到。面板成功滑落，但不会滑回，警报显示IsShown var没有被修改 –

答

这是我会怎么处理这个问题：

http://jsfiddle.net/du8z8/3/

HTML

<div class="con"> 
    <div id="tab">Click to Show</div> 
    <div id="panel" style="display:none;"> 
     <p>Awesome hidden sliding pane</p> 
     <div id="close">Close</div> 
    </div>  
</div>

JQUERY

$("#tab").click(function() { 
    $("#tab").toggle(); 
    $("#panel").slideToggle('slow'); 
});  

$("#close").click(function() { 
    $("#tab").toggle(); 
    $("#panel").slideToggle('slow');   
});

CSS

.con { position:relative; } 

    #tab { 
     position:absolute; 
     top:0px; 
     right:20px; 
     padding: 10px; 
     background: #EEE; 
     font-size: 16px; 
     text-decoration: none; 
     -webkit-border-bottom-right-radius: 10px; 
     -webkit-border-bottom-left-radius: 10px; 
     cursor:pointer; 
    } 

    #close { padding:10px 0 0 0; font-size:0.750em; } 

    #panel { 
     padding:50px; 
     width:100%; 
     text-align:center; 
     font-size:1em; 
     font-family:Arial; 
     font-weight:bold; 
     background:#EEE; 
     cursor:pointer; 
     -webkit-border-bottom-left-radius:10px; 
    }

非常感谢！这一个更有效率 –

答

的点击监听器被传递的事件，而不是你的布尔值。

$(document).ready(function(){ 
    var $isShown, 
     ANIMATION_LENGTH = 400, 
     $panel = $("#panel"), 
     $tab = $("#tab"); 
    $tab.click(function(event){ 
     event.preventDefault(); 
     $isShown = !$isShown; 
     var newTop = $isShown == false ? "-180px" : "0px"; 
     var lit = {"top": newTop}; 
     $panel.animate(lit, ANIMATION_LENGTH);  
    }); 
});

Javascript滑动垂直pannel切换

相关推荐