javascript - 如何在 JQuery 中制作通用切换功能？

Question

我有一个像这样的 HTML 侧边菜单：

_Layout.cshtml

<div class="col nav-left h-100">
<p>Menu</p>
</div>

在我的Site.js 中，我为切换创建了一个通用的 JQuery 函数：

var eventHandler = {
    addToggle: function addToggle(btnElem, openEvent, closeEvent) {
        const isClosedClass = 'this-is-closed';
        btnElem.click(function () {
            if ($(this).hasClass(isClosedClass)) {
                openEvent();
            } else {
                closeEvent();
            }
        });
    }
};

在我的_Layout.cshtml我这样调用这个函数：

 <script>
        eventHandler.addToggle($(".btn-toggle-something"),
            function () {
                // Slide down
            },
            function () {
                // Slide up
            });

 </script>

现在我被卡住了如何为 div 上的实际切换编写逻辑。

如何使用通用功能切换我的侧边菜单？

我看过的资料来源：

https://api.jquery.com/toggle/

如何使用 jQuery 切换（隐藏/显示）侧边栏 div

标签： javascriptjqueryhtmlasp.net-corerazor

Answer 1

.slideUp()和.slideDown() 与 .toggleClass()结合使用- 请参见下文：

var eventHandler = {
    addToggle: function addToggle(btnElem, openEvent, closeEvent) {
        const isClosedClass = 'this-is-closed';
        btnElem.click(function () {
            if ($(this).hasClass(isClosedClass)) {
                openEvent();
            } else {
                closeEvent();
            }

            // Toggle `isClosedClass` for next time this is clicked.
            btnElem.toggleClass(isClosedClass);
        });
    }
};

// Bind slideDown/slideUp.
var leftNav = $('.nav-left');

eventHandler.addToggle($('.btn-toggle-something'),
    function () {
        leftNav.slideDown();
    },
    function () {
        leftNav.slideUp();
    }
);

body {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
}

.nav-left {
  background-color: lightskyblue;
  width: 200px;
  height: 400px;
}

.btn-toggle-something {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 250px;
  height: 50px;
  width: 50px;
  background-color: salmon;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col nav-left h-100">
  <p>Menu</p>
</div>

<div class="btn-toggle-something">Toggle</div>