使用媒体查询隐藏 Bootstrap 下拉列表

s6fujrry 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(1)|浏览(145)

我有一个引导下拉菜单，只有在屏幕达到一定宽度时才能看到。我的问题是，当我调整屏幕大小以隐藏下拉按钮时，以前单击/打开的下拉菜单仍然打开。
有没有一种方法可以关闭下拉菜单或者根据媒体查询去掉菜单的显示类？我见过类似问题的答案，但是没有一个能帮到我。
我可以添加什么样的CSS来关闭下拉菜单？到目前为止，它一直保持打开状态，直到无焦点，但我想它关闭像这样的网站下拉。

.sm-screen-dropdown-menu {
  top: 48px !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  border: none;
  border-radius: 0px;
  padding: 0;
  min-width: 200px;
}

@media (max-width: 600px) {
  .hide-sidebar {
    display: none !important;
  }
  .sm-screen-dropdown {
    display: flex;
    font-size: 20px;
    margin-right: 15px;
    margin-left: 10px;
    text-decoration: none;
  }
  .sm-screen-dropdown:hover {
    cursor: pointer;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="dropdown center">
  <div class="sm-screen-dropdown" dropdown-toggle type="button" data-bs-toggle="dropdown" aria-expanded="false">
    <i class="fa-solid fa-bars menu-icon"></i>
  </div>
  
  <ul class="dropdown-menu sm-screen-dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li>
      <a class="dropdown-item" href="/">Home</a>
    </li>
    <div class="dropdown-divider no-margin"></div>
    <div class="ms-2">
      <li>
        <a class="dropdown-item" href="{% url 'home' %}">Groups</a>
      </li>
      <li>
        <a class="dropdown-item" href="{% url 'taglist' %}">Tags</a>
      </li>
    </div>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

twitter-bootstrap

来源：https://stackoverflow.com/questions/73461017/hide-bootstrap-dropdown-with-media-query

1条答案

按热度按时间

eimct9ow1#

你没有在任何一个片段中运行你的代码，这使得你很难得到完整的画面。但是，我把这些放在一起向你展示如何在JS中隐藏/显示基于媒体查询的元素，而不是在CSS中。

在整个页面中运行代码片段，检查并降低视口宽度，当视口小于576 px时，您将看到圆圈消失

您也可以查看此**Codepen**

const smallDevice = window.matchMedia("(min-width: 576px)");
let circle = document.querySelector(".shape.circle");

smallDevice.addListener(handleDeviceChange);

function handleDeviceChange(e) {
  if (e.matches) circle.style.display = 'block';
  else circle.style.display = 'none';
}

//run it initially
handleDeviceChange(smallDevice);

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}

.shape {
  width: 250px;
  height: 250px;
  border: 1px solid black;
}
.shape + .shape {
  margin-top: 1rem;
}
.shape.box {
  background: blue;
}
.shape.circle {
  border-radius: 50%;
  background: red;
}

<div class="shape box"></div>
<div class="shape circle" style="display: none;"></div>

赞(0）回复(0）举报 2022-12-16

我来回答

使用媒体查询隐藏 Bootstrap 下拉列表

1条答案

相关问题

热门标签

最新问答