Question

我正在尝试创建侧边栏，但在使用媒体查询时遇到问题。如果窗口小于991，我将无法再次切换侧面菜单。

所以我需要这样的东西。 （这不起作用，因为每次调整时都会点击菜单）。我怎么能这样做？

$(window).resize(function () {
   var width = $(window).width();

   if(width < 991) {
       //to hide
       $('#sidebar-btn').click();
   }
   else {
       //to show
       $('#sidebar-btn').click();
   }
});

Answer 1

请查看以下自定义响应式菜单的jsfiddle示例

var _init = function(){
    var touchBtn = $('.responsiveButton'),
        body = $('body'),
        vsMenu = $('.vsMenu'),
        vsMenuPosition = parseInt(vsMenu.css('left')),
        vsMenuWidth = parseInt(vsMenu.width()),
        windowWidth = parseInt($(window).width());

    var _open = function(this_){
        this_.addClass('vsMenuOpen');
        vsMenu.scrollTop(0);
        vsMenu.animate({
            left: '0'
        });
        body.animate({
            left: vsMenuWidth
        });
        body.addClass('vsMenuBody');
        body.css({
            position: 'absolute',
            overflow: 'hidden',
            width: windowWidth
        });
        //$('.headerWrap').css({
            //width: windowWidth
        //});
    }

    var _close = function(this_){
        this_.removeClass('vsMenuOpen');
        vsMenu.animate({
            left: -vsMenuWidth
        }, function () {
            vsMenu.removeAttr('style');
        });
        body.stop().animate({
            left: '0'
        }, function () {
            body.removeClass('vsMenuBody');
            body.removeAttr('style');
            //$('.headerWrap').removeAttr('style');
        });

    } 

    touchBtn.click(function (e) {
        e.preventDefault();
        vsMenuPosition = parseInt(vsMenu.css('left'));
        if (vsMenuPosition == -vsMenuWidth) {
            _open($(this));
        } else {
           _close($(this));
        }
    }); 

    $('body').click(function() {
        vsMenuPosition = parseInt(vsMenu.css('left'));        
        if (vsMenuPosition === 0) {
            _close(touchBtn);
        }
    });
    $('body').on("click", ".vsMenu", function(event) {
        event.stopPropagation();
    });
    $(window).resize(function() {
        windowWidth = parseInt($(window).width());
        vsMenuWidth = parseInt(vsMenu.width());
        touchBtn = $('.responsiveButton');
        if(windowWidth >767){
            if(touchBtn.hasClass('vsMenuOpen')) {
                touchBtn.trigger('click');
            }
        }
    });
};  

$(document).ready(function() {
   _init();
});

body {
    font-family: arial;
    font-size: 12px;
    margin:0;
}
.clear {
    clear:both;
}
ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

ul li {
    padding: 0;
    margin: 0;
}
.source {
    position: static;
    z-index: 1000;
    top: 50px;
    right: 50px;
}
pre code.python {
    display: block;
    padding: .2em;
    background: #ffffff;
    border-radius: 15px;
}
.container {
    width: 640px;
    margin: auto;
}
/******************* Desktop Menu *******************/
 .vsMenu {
    overflow: hidden;
    background-color: #333;
}
.vsMenu li {
    float: left;
    margin-right: 40px;
}
.vsMenu li a {
    color: #FFFFFF;
    display: block;
    padding: 10px 0;
}
.responsiveButton {
    display: none;
}
@media (max-width: 767px) {
    .container {
        width: auto;
        padding: 50px
    }
    /******************* Responsive Menu *******************/
    .vsMenuBody {
        position: absolute
    }
    .responsiveButton {
        background: #0E0E0E;
        display: block;
        padding: 5px 15px;
        left: 0;
        top: 0;
        z-index: 1000;
        position: absolute;
        display: block;
    }
    .icon-bar {
        background-color: #F5F5F5;
        border-radius: 1px;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
        display: block;
        height: 2px;
        width: 18px;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        -webkit-transition: -webkit-transform 80ms ease-out;
        transition: transform 80ms ease-out;
        margin: 4px 0
    }
    .vsMenuOpen .icon-bar {
        background: #000;
    }
    .vsMenuOpen .icon-bar:first-child, 
    .vsMenuOpen .icon-bar:last-child {
        background: #fff;
        position: relative;
        z-index: 1;
    }
    .vsMenuOpen .icon-bar:first-child {
        top: 0.5em;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .vsMenuOpen .icon-bar:last-child {
        top: -0.5em;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .vsMenu {
        position: fixed;
        top: 0;
        height: 100%;
        z-index: 999999;
        width: 260px;
        overflow-y: auto;
        background: #F2F2F2;
        color: #333;
        left: -260px;
        box-shadow: -12px 0 8px -8px rgba(0, 0, 0, 0.25) inset
    }
    .vsMenu li {
        float: none;
        margin-right: 0;
    }
    .vsMenu li a {
        display:block;
        padding: 10px;
        color: #be2025;
        text-decoration: none;
        border-bottom:1px solid #58585a
    }
    .vsMenu li a:hover {
        background: #58585a;
        color: #ffffff
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container"> <a class="responsiveButton" href="#">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>

    <div class="vsMenu">
        <ul class="navig">
            <li><a href="#">Menu 1</a>
            </li>
            <li><a href="#">Menu 2</a>
            </li>
            <li><a href="#">Menu 3</a>
            </li>
            <li><a href="#">Menu 4</a>
            </li>
            <li><a href="#">Menu 5</a>
            </li>
            <li><a href="#">Menu 6</a>
            </li>
        </ul>
    </div>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>

简单的侧边栏Jquery / Html / Css

1 个答案: