基于jQuery的侧边栏显示/隐藏功能异常问题求助

Hey there, let's fix those sidebar issues you're having! I've reviewed your code and identified the root causes of both problems, along with a revised solution that should resolve everything without needing page refreshes.

Problem Breakdown & Fixes #

Issue 1: Sidebar won't toggle on small screens until page refresh #

The original code binds the resize event only after a document click, which means the responsive state isn't properly synced when the page first loads. Additionally, the toggle button's logic doesn't account for the initial hidden state of the sidebar set by responsiveView.

Issue 2: Sidebar stays hidden when resizing to large screens #

The responsiveView function only toggled the sidebar-close class and showed/hide the sidebar's <ul>, but didn't update the margin styles or sidebar-closed class that your toggle button uses. This left the sidebar in a hidden state even after resizing up.

Revised Full jQuery Code #

$(document).ready(function() {
    // Mobile check function (unchanged)
    function mobilecheck() {
        var check = false;
        (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
        return check;
    };

    // Updated responsive view handler
    function responsiveView() {
        if ($(window).width() <= 768) {
            // Set sidebar to hidden state for small screens
            $('#container').addClass('sidebar-close sidebar-closed');
            $('#sidebar > ul').hide();
            $('#sidebar').css({ 'margin-left': '-210px' });
            $('#main-content').css({ 'margin-left': '0px' });
        } else {
            // Reset sidebar to visible state for large screens
            $('#container').removeClass('sidebar-close sidebar-closed');
            $('#sidebar > ul').show();
            $('#sidebar').css({ 'margin-left': '0' });
            $('#main-content').css({ 'margin-left': '210px' });
        }
    }

    // Bind events correctly
    $(window).on('load resize', responsiveView); // Trigger on load AND resize

    // Updated toggle button logic
    $('.sidebar-toggle-box').click(function () {
        if ($('#container').hasClass('sidebar-closed')) {
            // Open sidebar
            $('#main-content').css({ 'margin-left': '210px' });
            $('#sidebar').css({ 'margin-left': '0' });
            $('#sidebar > ul').show();
            $("#container").removeClass("sidebar-closed");
        } else {
            // Close sidebar
            $('#main-content').css({ 'margin-left': '0px' });
            $('#sidebar').css({ 'margin-left': '-210px' });
            $('#sidebar > ul').hide();
            $("#container").addClass("sidebar-closed");
        }
        // Reinitialize owl carousel (with error check)
        var owl = $("#owl-demo").data("owlCarousel");
        if (owl) owl.reinit();
    });
});

Key Changes Made #

• Fixed event binding: The responsiveView function now triggers on both load and resize events, ensuring the sidebar state is always in sync with window size, no clicks required.
• Unified state management: The responsiveView function now updates all related styles (margins) and classes, so the sidebar's state is consistent whether triggered by window resize or toggle button.
• Simplified toggle logic: Now checks the sidebar-closed class directly, making the code more readable and ensuring it works with the initial state set by responsiveView.
• Added error check: Added a check for the owl carousel instance to prevent console errors if it's not present.

This should resolve both issues:

1. The toggle button will work immediately on small screens without needing a refresh.
2. Resizing from small to large screens will automatically show the sidebar without any manual refresh.

内容的提问来源于stack exchange，提问作者Spookie