Question

一直在做一个codeacademy课程http://www.codecademy.com/ru/courses/javascript-lesson-951/0?curriculum_id=4fc3018f74258b0003001f0f#!/exercises/6 - 制作垂直滑动面板。问题是这些代码问题的家伙没有解释如何使面板不仅向下滑动，而且还向后滑动。我试图自己做，但没有做到任何事情。请帮忙。

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

Answer 1

点击侦听器获取传递的事件，而不是您的布尔值。

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

Answer 2

这就是我解决问题的方法：

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

Javascript滑动垂直面板切换

2 个答案: