使用 CSS 显示和隐藏 Div

Question

我正在尝试隐藏一个 div 并根据用户的屏幕尺寸显示另一个。所以我想在桌面上隐藏一个 header 并显示另一个，反之亦然移动。这就是我目前正在尝试的。

这是我为两个 header 准备的 asp。

<div id="headerContainer" class="container a" style="background-color: white;">
<div class="row" style="text-align: center;">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
        <img src="Images/JDC Logo No Border Jpg Smaller.png" class="img-responsive" style=" padding-top: 4%;" alt="JD&C Services Logo - Header Image"/> <!--img-responsive-->
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
        <button ID="BTN_Home" class="headerButtons hvr-underline-from-center " runat="server" onserverclick="BTN_Home_ServerClick">HOME</button>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
        <button ID="BTN_OHS" class="headerButtons hvr-underline-from-center " runat="server" onserverclick="BTN_OHS_ServerClick" href="Safety.aspx" >SAFETY</button>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
        <button ID="BTN_Services" class="headerButtons hvr-underline-from-center " runat="server" onserverclick="BTN_Services_ServerClick" >SERVICES</button>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
        <button ID="BTN_Careers" class="headerButtons hvr-underline-from-center headerPadding" runat="server" onserverclick="BTN_Careers_ServerClick">CAREERS</button>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
        <button ID="BTN_Contact" class="headerButtons hvr-underline-from-center " runat="server" onserverclick="BTN_Contact_ServerClick">CONTACT</button>
    </div>
</div>

<div id="expandableHeader2" data-role="main" class="ui-content">
    <div data-role="collapsible" id="expandableHeader">
      <h1><i class="fa fa-bars"></i></h1>
      <p>I'm the expanded content.</p>
    </div>
</div>

这是我用来隐藏和显示 header 的 CSS。

@media screen and (max-width: 1240px){
    #expandableHeader{
        display: inline !important;
        visibility: visible;
    }
    #expandableHeader2{
        display: inline !important;
        visibility: visible;
    }
    #headerContainer{
        display: none;
        visibility: hidden;
    }
}
@media screen and (min-width: 1241px){
    #expandableHeader, #expandableHeader2{
        display: none;
        visibility: hidden;
    }
}

所以我遇到的问题是在桌面上它工作正常。我能够隐藏可扩展的 header，并显示主要的 header。但是在手机上它不能完全工作。在移动设备上，主要的 header 会隐藏，但不会显示可扩展的 header。我不确定发生了什么。

Answer 1

您缺少 "headerContainer" </div>

只需在

前加上</div>

<div id="expandableHeader2" data-role="main" class="ui-content">

样本：http://jsfiddle.net/jdjor7nm/

使用 CSS 显示和隐藏 Div

Showing and Hiding Div with CSS

asp.net

jquery-ui

header