如何让我的 jquery 移动面板滑出垂直菜单？答案

【问题标题】：How do i get a vertical menu to slide out with my jquery mobile panel?如何让我的 jquery 移动面板滑出垂直菜单？
【发布时间】：2013-04-20 02:27:31
【问题描述】：

所以我在屏幕右侧有一个菜单（仅图标），我希望在面板打开时让图标与面板一起滑出。但我希望在面板关闭时菜单可见。一张图片将打开一个面板，另一张图片将打开另一个面板。

<div class="buttons right">
            <a href="#rightpanel3" data-role="button" data-inline="true" class="filter">One</a> 
            <a href="#rightpanel1" data-role="button" data-inline="true" class="layers">Two</a> 
            <a href="#rightpanel2" data-role="button" data-inline="true" class="list">Three</a> 
            <a href="#rightpanel4" data-role="button" data-inline="true" class="settings">four</a>
</div>
<div data-role="panel" id="rightpanel3" data-position="right"
            data-display="overlay" data-dismissible="false" data-theme="b">
            <h3>Search/Filter</h3>
            <h4 class="top heading">Search</h4>
            <h4 class="heading">Filter</h4>
</div>

jsfiddle：jsfiddle.net/5GhPM

【问题讨论】：

好的，我添加了我的代码。现在我在第一个 div 中有按钮，单击时会调出面板。哪个可以打开面板，但我的按钮隐藏在面板后面，我希望它们与面板一起滑出。
分享所有相关代码，包括jQuery/Javascript，如果可能的话，分享一个jsFiddle。
这是一个快速的 jsFiddle jsfiddle.net/5GhPM

标签： javascript jquery css jquery-mobile

【解决方案1】：

可能需要一些调整，但这可行：

$("#rightpanel3").on("panelopen", function() {
    $(".buttons.right").animate({ marginRight: $("#rightpanel3").width() });
});

$("#rightpanel3").on("panelclose", function() {
    $(".buttons.right").animate({ marginRight: -($("#rightpanel3").width()) });
});

http://jsfiddle.net/yRu4q/

事件记录在here。

【讨论】：