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只用767px或更低的媒体查询隐藏/显示div？

Answer 1

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

CSS：

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

Answer 2

@media( max-width: 767px ) { #headerrightside { display: none; } }：

为767px及以下隐藏#headerrightside。

Answer 3

如果您使用的是bootstrap，则隐藏内置类 - **和可见 - **以处理不同大小的可见性

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

3 个答案: