Question

我正在制作一个简单的WordPress主题，我想要包含一个jQuery Sidr并且我已经完成了正确的操作，但拉动侧滑杆的菜单图标消失在侧边栏后面，让用户无法做到再次折叠边栏。

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

相关菜单图标位于右上方。我给它顶部和右边的属性，浮动它，以及给它一个固定的位置，使它留在那里。

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

我试过给它一个有效的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）

Answer 2

当您触发jQuery移动菜单以使其滑出时，使用jquery animate命令将此菜单图标（.genericon.genericon-menu）的“right”属性更改为270px。

所以，就像这样：

$(document).ready(function(){
$('.genericon.genericon-menu').on('click', function(){
    $('#idofmenu').//code to move the menu out;

    $('this').animate({
        right: "270px"
    }, 500);
});
});

然后菜单崩溃时反之亦然。

我该如何移动这个浮动div？

2 个答案: