Question

我有一个侧边栏，我有一个按钮，可以在点击时切换侧边栏。我有一个jQuery函数来做到这一点。我现在有一个新的功能，如果侧边栏打开并且用户点击侧边栏中的任何列表项，它会切换回来并且某些功能将被激活。

问题：

当我点击侧边栏内的li时，切换按钮正在等待它的第二次点击（我的猜测）。因此，如果我在单击侧栏li时添加切换，则主切换按钮功能会中断。如何在不相互影响的情况下保持两者。我希望我已经说清楚了。这是代码。

JS

// code for sidebar toggle in jQuery
$.fn.toggleClick = function () {
    var methods = arguments,
        count = methods.length;
    return this.each(function (i, item) {
        var index = 0;
        $(item).on('click', function () {
            return methods[index++ % count].apply(this, arguments);
        });
    });
};

//for opening sidebar
function openSidebar() {
    $('#sg-evm-sidebar').animate({
        left: 0
    }, 300)
    $('.container').css({
        position: "fixed"
    }).animate({
        left: 300
    }, 300)
    $('.content-overlay').delay(300).show();
}
//closing sidebar
function closeSidebar() {
    $('#sg-evm-sidebar').animate({
        left: -300
    }, 300)
    $('.container').css({
        position: "fixed"
    }).animate({
        left: 0
    }, 300)
    $('.content-overlay').delay(300).hide();
}

//$(".empName").on("click", function () {
//   closeSidebar();
//});

// calling toggleclick here
$('.toggle-box').toggleClick(openSidebar, closeSidebar);

这是JS FIDDLE。我是从我庞大的网站创建的。所以请忽略破碎的图像。

Answer 1

我已经更新了你的小提琴：http://jsfiddle.net/qvksx30g/4/

我添加了一些基本逻辑

var sidebarOpen = false;

function toggleSidebar()
{
    if (sidebarOpen)
        closeSidebar();
    else
        openSidebar();
}

然后在openSidebar和closeSidebar内设置sidebarOpen。

我也不再使用toggleClick了。相反，我使用：

$(document).on('click', '.toggle-box', toggleSidebar)
  .on('click', '.list li', closeSidebar);

Answer 2

您可以使用侧边栏包装上的类（“关闭”或“打开”）跟踪侧边栏状态（打开或关闭），然后使用此类在您的点击监听器中确定是否必须调用closeSidebar或openSidebar。

向侧边栏添加点击功能，而不会影响其切换功能

2 个答案: