如何在JQuery中创建通用切换功能？

Question

I have a sidemenu in HTML like this:

_Layout.cshtml

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

In my Site.js I have made a generic JQuery function for the toggle:

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

In my _Layout.cshtml I call this function like this:

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

 </script>

Now I getting stuck how to write the logic for the actual toggle on a div.

How can I toggle my side menu with a generic function?

Sources I looked:

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

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

Answer 1

.slideUp() and .slideDown() in combination with .toggleClass() will work - please see below:

 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>