html - 我将如何移动这个 float 的 div？

Question

我正在制作一个简单的 WordPress 主题，我想在其中包含一个 jQuery Sidr，我正确地完成了这项工作，但是拉动滑入式侧边栏的菜单图标消失在侧边栏后面，让用户无法折叠再次侧边栏。

主题远未完成(我正在使用离线 WP 设置对其进行处理)但为了这个问题我暂时把它放在这里:http://sweven.vhbelvadi.com

有问题的菜单图标在右上角。我已经赋予它 top 和 right 属性，将它 float 到正确位置，并赋予它一个固定位置以使其停留在那里。

正如我所说，设计远未完成，所以请不要注意它，但是一旦您点击图标滑出侧边栏区域，菜单图标就会消失。

我试过给它一个有效的 z-index，将菜单按钮放在顶部并使其可访问，但是你在上面的链接上看不到它，因为我删除了它；不喜欢它的外观。

基本上，我想知道是否有任何方法可以更改属性(焦点、事件似乎不起作用)或做任何其他事情，以便一旦侧边栏打开，菜单图标就会随之滑出。

我的解决方案是什么？

谢谢。

更新:

现在我在上面的链接中使用以下代码:

    $(document).ready(function(){
$('span.genericon').on('click', function(){
     $('#simple-menu').sidr({side: "right"});   
    $('span.genericon').css({
        right: "6.5em"
    }, 500);
});
 });

它有效，但我如何将菜单图标恢复到原来的位置？

Answer 1

折叠按钮在那里，但是当侧边栏打开时，按钮在它后面，所以你需要根据侧边栏是可见还是隐藏来更改 CSS，所以使用如下所示的一种切换。

$('button').toggle(
function() {
    $('#B').css('left', '0')
}, function() {
    $('#B').css('left', '200px')
})

Demo

Demo 2 (作者 Patrick)