javascript - CSS 在移动设备上显示隐藏的下拉菜单

Question

我有一个效果很好的下拉式页脚:

$('#drop-up-open').click(function() {
  $('#drop-up #drop-upDashboard').slideToggle({
    direction: "up"
  }, 300);
  $(this).toggleClass('drop-upClose');
}); // end click

#drop-up {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom: 4%;
  z-index: 100;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

#drop-up-open {
  cursor: pointer;
  text-decoration: none;
}

#drop-up .drop-upClose {}

#drop-up #drop-upDashboard {
  display: none;
}

@media screen and (max-width: 1000px) {
#drop-up #drop-upDashboard{ 
display:block; }
}

<div class="container">

    <!-- Jumbotron Header -->
    <header class="jumbotron panel-heading">

    <p class="text-center">
    
                Text getting covered by drop-up menu on mobile

    </p>

    <section>
                <a href="#"><button> Main button </button></a>
    </section>
    
    </header>

<div id="drop-up">
  <a href="#" id="drop-up-open">Open</a>

  <div id="drop-upDashboard">
    <p>It's now open!</p>

    <div class="row">

      <div class="col-md-3 col-xs-12">
        <section> <a href="#"><button>
                            
                            <p>Button 1</p>

                        </button></a> </section>
      </div>

      <div class="col-md-3 col-xs-12">
        <section> <a href="#"><button>
                            
                            <p>Button 2</p>

                        </button></a> </section>
      </div>

      <div class="col-md-3 col-xs-12">
        <section> <a href="#"><button>
                            
                            <p>Button 3</p>

                        </button></a> </section>
      </div>

      <div class="col-md-3 col-xs-12">
        <section> <a href="#"><button>
                            
                            <p>Button 4</p>

                        </button></a> </section>
      </div>

    </div>
    <!-- row -->
  </div>
  <!-- dashboard -->
</div>
<!-- drop-up -->
</div>
<!-- container -->

当我点击 id="drop-up"div 时，菜单从下到上打开，并占据桌面 View 窗口底部的一小部分。

现在，我想要的是这个最初隐藏在桌面 View 中的菜单，无需单击 id="drop-up"div 即可显示在较小的设备(移动设备+平板电脑)上。它会占据移动设备+平板电脑页面底部的相同部分(然后用户需要向下滚动才能在较小的设备上看到下拉菜单，而在桌面 View 上则不是这种情况)。

关于实现此目标的最佳方法有什么建议/提示吗？

Answer 1

您可以将整个内容包裹在一个 flex 盒子中，然后让主体 flex 以填充其余空间，从而将您的页脚放在页脚级别。当您响应时，也“看起来”可以工作。

但是，目前这感觉很老套，就好像您在 flex box 容器周围画了一个边框，它只会适合其原始的 100% 水平。

$('#drop-up-open').click(function() {
  $('#drop-up #drop-upDashboard').slideToggle({
    direction: "up"
  }, 300);
  $(this).toggleClass('drop-upClose');
}); // end click

html, body {
  height: 100%;
}
#drop-up-open {
  cursor: pointer;
  text-decoration: none;
}

#drop-up .drop-upClose {}

#drop-up #drop-upDashboard {
  display: none;
}

@media screen and (max-width: 200px) {
  #drop-up #drop-upDashboard{ 
  display:block; }

  html, body {
    height: auto !important;
  }

}


.container {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  min-height: 100%;
}

.body {
  flex: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

    <!-- Jumbotron Header -->
    <header class="jumbotron panel-heading" style="background-color: yellow; opacity: 0.7">

      <p class="text-center">

                  Text getting covered by drop-up menu on mobile

      </p>

      <section>
                  <a href="#"><button> Main button </button></a>
      </section>

    </header>
    
    <div class="body" style="background-color: orange; opacity: 0.3">
      a body
    </div>

  <div id="drop-up" style="background-color: lightblue; opacity: 0.7">
    <a href="#" id="drop-up-open">Open</a>

    <div id="drop-upDashboard">
      <p>It's now open!</p>

      <div class="row">

        <div class="col-md-3 col-xs-12">
          <section> <a href="#"><button>

                              <p>Button 1</p>

                          </button></a> </section>
        </div>

        <div class="col-md-3 col-xs-12">
          <section> <a href="#"><button>

                              <p>Button 2</p>

                          </button></a> </section>
        </div>

        <div class="col-md-3 col-xs-12">
          <section> <a href="#"><button>

                              <p>Button 3</p>

                          </button></a> </section>
        </div>

        <div class="col-md-3 col-xs-12">
          <section> <a href="#"><button>

                              <p>Button 4</p>

                          </button></a> </section>
        </div>

      </div>
      <!-- row -->
    </div>
    <!-- dashboard -->
  </div>
  <!-- drop-up -->
</div>
<!-- container -->