Question

我正在尝试隐藏div并根据用户屏幕大小显示另一个div。所以我想在桌面上隐藏一个标题并显示另一个标题，反之亦然。这是我正在尝试的。

这是我对两个标题的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>

这是我用来隐藏和显示标题的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;
    }
}

所以我遇到的问题是在桌面上运行正常。我能够隐藏可扩展的标题，并显示主标题。但是在移动设备上却没有完全发挥作用。在移动设备上，主标题变为隐藏，但不显示可扩展标题。我不确定发生了什么。

Answer 1

你错过了＆＃34; headerContainer＆＃34; </div>

只需在

之前添加</div>即可

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

示例：http://jsfiddle.net/jdjor7nm/

使用CSS显示和隐藏Div

1 个答案: