Javascript滑动垂直窗格切换_Javascript_Jquery_Web

Javascript滑动垂直窗格切换

javascript jquery web

Javascript滑动垂直窗格切换,javascript,jquery,web,Javascript,Jquery,Web,一直在做一门代码学院课程——制作垂直滑动面板。问题是，这些代码学院的人没有解释如何使面板不仅向下滑动，而且向上滑动。我试着自己去做，但什么也没做。请帮忙 $(document).ready(function(){ ANIMATION_LENGTH = 400; $panel = $("#panel"); $tab = $("#tab"); var $isShown; $tab.click(function($isShown){ alert($isShown); if ($isS

一直在做一门代码学院课程——制作垂直滑动面板。问题是，这些代码学院的人没有解释如何使面板不仅向下滑动，而且向上滑动。我试着自己去做，但什么也没做。请帮忙

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

HTMl


后果
隐藏式滑动窗格

单击侦听器将获得传递的事件，而不是布尔值

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

这就是我处理问题的方法：

HTML

CSS

请包括你的HTML和CSS代码。当然，虽然没有太多可看的。窗格成功地向下滑动，但没有向后滑动，警报显示IsShown var没有被修改

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

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

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

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

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

    .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;
    }