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/

How to toggle (hide / show) sidebar div using jQuery

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>