堆棧內存溢出
  簡體   English   中英

如何在鏈接上滑動DIV單擊

[英]How to slide a DIV on link click

 原文  2014-03-12 21:07:28  8   2    javascript/ jquery/ html/ css

問題描述

我有以下HTML： 

<div id="trt" style="position: relative; height: 40px;">
    <a href="#" style="text-align: center" class="a_demo_three third_button">
        M E N U
    </a>
</div>
<div id="tst" style="position: relative; height: 200px; width: 200px; background-color: #FF0000; display: none;">
    THIS IS THE INNER MENU
</div>

CSS： 

.a_demo_three {
    background-color:#3bb3e0;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    position:relative;
    padding:10px 20px;
    border-left:solid 1px #2ab7ec;
    margin-left:35px;
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(44,160,202)),
    color-stop(1, rgb(62,184,229))
    );
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}

.a_demo_three:active {
    top:3px;
    background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(62,184,229)),
    color-stop(1, rgb(44,160,202))
    );
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

.a_demo_three::before {
    background-color:#2561b4;
    content:"1";
    width:35px;
    max-height:29px;
    height:100%;
    position:absolute;
    display:block;
    padding-top:8px;
    top:0px;
    left:-36px;
    font-size:16px;
    font-weight:bold;
    color:#8fd1ea;
    text-shadow:1px 1px 0px #07526e;
    border-right:solid 1px #07526e;
    background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
    background-image: -o-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(10,94,125)),
    color-stop(1, rgb(14,139,184))
    );
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
    -moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
    -o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
    box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
}

.a_demo_three:active::before {
    top:-3px;
    -webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
    -moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
    -o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
    box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
}

/*
Third button
*/

.third_button::before {
    content: url('menu.png');
}

腳本： 

<script>
$(document).ready(function(){
    $('#trt a').click(function(e){ //where menu is the id of your menu item
        e.preventDefault();
        $('#tst').slideToggle(); // where content is the id of your content div
    });


    //ORIGINALLY THE MENU should be hidden out of the user's view.
    //ON CLICKING ON MENU the `tst` div will slide down, the menu button should be in `active` status.
    //ON CLICKING ON MENU again the `tst` div will slide up and out of view and the menu button should be in `normal` status
});
</script>

我想做的是頁面加載時看tst div。 當用戶點擊a鏈接這是一個按鈕時， tst DIV應該向右滑動，和被放置在右邊的鏈接的。

從此開始：

在此處輸入圖片說明

當用戶單擊菜單時， tst div應當動畫並向右滑動，並且應如下所示：

在此處輸入圖片說明

最后，當用戶再次單擊菜單鏈接時， tst div會向左滑動並離開用戶視圖。

我該如何實現？

2 個解決方案

解決方案1
 1  2014-03-12 21:16:23

看一下： jsFiddle 。

向兩個div添加了float:left 。

解決方案2
 1 已采納  2014-03-12 21:23:40

試試這個小提琴。 添加了float: left同時位於按鈕和菜單http://jsfiddle.net/borglinm/sp3ju/3/

的JavaScript 

$(document).ready(function(){
    $('#trt a').click(function(e){
        e.preventDefault();
        console.log($('#tst').css("left"));
        if($('#tst').css("left") === "-350px") {
        $('#tst').animate({"left": 0});
        }
        else
        {
            $('#tst').animate({"left": -350});
        }
    });
});

相關CSS添加 

body {
    margin: 0;
}

.a_demo_three {
    display: inline-block;
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 單擊<a>標簽</a>時如何滑動 div <a>？</a> jQuery幻燈片單擊鏈接 點擊滑動更改div 單擊時向上滑動div Div滑動單擊鏈接 單擊時向下滑動和向上滑動 div 在單擊時左右滑動div 在Click上上下滑動Div javascript 在點擊圖片時在 div 中滑動？ 如何使用jquery或javascript單擊按鈕時向右滑動div？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM