javascript - 在小屏幕上隐藏/显示标题，但在大屏幕上保持 Jquery/CSS

Question

我目前正在向我的移动网站添加一个汉堡包吧。我可以让这些东西当前消失，然后再次显示。问题是当我隐藏/显示 div 时，它会在大屏幕上弄乱网站。

在我从汉堡包按钮隐藏我的菜单后，大屏幕上的标题就会消失。我怎样才能让汉堡包按钮在小屏幕上只显示/隐藏标题？这是我的代码:

HTML

<span id="headerdisplaybuttonsxs" class="glyphicon glyphicon-menu-hamburger"> </span>
<span id="headerdisplayloginxs" class="glyphicon glyphicon-user"> </span>
<div id="headerrightside">Content</div>
<div id="headerleftside">Other Content</div>

JQuery

$('#headerdisplaybuttonsxs').click(function() {
    if($('#headerrightside').css('display') == 'none') {
        $('#headerleftside').hide();
        $('#headerrightside').show();
    }
    else {
        $('#headerrightside').hide();
    }
});

$('#headerdisplayloginxs').click(function() {
    if($('#headerleftside').css('display') == 'none') {
        $('#headerrightside').hide();
        $('#headerleftside').show();
    }
    else {
        $('#headerleftside').hide();
    }
});

那么基本上我是如何让 Hamburger Bar 只隐藏/显示 767 像素或更小的媒体查询的 div 的？

Answer 1

在大屏幕上将切换按钮设置为 display:none。

CSS:

    @media (min-width:768px) {
      #headerdisplaybuttonsxs { display:none; }
    }
    @media (max-width:767px) {
      #headerdisplaybuttonsxs { display:inline; }
    }