我有一個引導下拉選單，僅當螢屏具有一定寬度時才可見。我的問題是，當我調整螢屏大小以隱藏下拉按鈕時，之前單擊/打開的下拉選單保持打開狀態。
有沒有辦法根據媒體查詢關閉下拉選單或擺脫選單的顯示類？我見過類似問題的答案，但沒有一個對我有幫助。
我可以添加什么 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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>uj5u.com熱心網友回復：
您沒有在任何型別的片段中運行您的代碼，這使得很難獲得全貌。但是，我將這些放在一起向您展示如何在 JS 中而不是在 CSS 中基于媒體查詢隱藏/顯示元素。
在整頁中運行代碼段，檢查并降低視口寬度，當視口小于 576px 時，您會看到圓圈消失
你也可以看看這個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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/507481.html
標籤：css django 推特引导 django-模板 引导程序 5
上一篇：如何“拉伸”容器中的表單組（Bootstrap4）？
下一篇：引導行無法在移動設備上正確折疊