在不影响其切换功能的情况下向侧边栏添加点击功能

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

我已经更新了你的fiddle：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

您可以在边栏包装器（"close" 或 "open"）上使用 class 来跟踪边栏状态（打开或关闭），然后使用此 class 在您的点击侦听器中确定您是否必须调用 closeSidebar 或 openSidebar。

在不影响其切换功能的情况下向侧边栏添加点击功能

Add a click functionality to sidebar without affecting its toggle feature

javascript

jquery

toggle

slidetoggle

togglebutton