Javascript 如何在单击链接时滑动DIV

我有以下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>

脚本：

<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会向左滑动并滑出用户的视图

我如何做到这一点？

看看这个：

在两个div中都添加了float:left。

试试这把小提琴。添加了浮动：按钮和菜单均为左侧

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

---

很高兴看到一个新的、以前从未问过的问题，过了一会儿：我删除了另一个问题，因为它没有正确解释，并用正确的代码和文档打开了一个新问题。奇怪的是，它在JSFIDLE中工作，但在我的网页中不工作：/you正在寻找类似的东西吗？哇，我想我会使用这个css看起来不错的菜单：几乎在那里，它不需要从左边滑入，然后滑出到左边。另外，我还有一些其他的div在它下面，我希望这个滑动能够在不向下推其他div的情况下发生…你能更新你问题中的HTML来反映额外的div以及任何css吗？在我提出任何修改建议之前，我只需要看看你的布局。

body {
    margin: 0;
}

.a_demo_three {
    display: inline-block;
}