边栏在桌面默认打开，在移动设备上关闭
Posted
技术标签:
【中文标题】边栏在桌面默认打开，在移动设备上关闭【英文标题】：Sidebar Open By Default on Desktop, Closed on mobile 【发布时间】：2020-03-08 17:41:18 【问题描述】：我在尝试让我的侧边栏/导航内容（使用 Bootstrap）默认在桌面上显示（展开）并在移动设备上默认关闭并且仅在移动设备上显示图标时遇到了一些真正的麻烦。我似乎无法让它工作。
<nav class="menu menu-open" id="theMenu">
<div class="menu-wrap">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i>
</button>
<div id="menu-logo">
<img src="Final_Logo.png" >
</div>
<div id="navbarToggleExternalContent">
<ul id="main-menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Writing</a>
<a href="#">Events</a>
<a href="#">Speaking</a>
<a href="#">Music</a>
</ul>
<ul id="social-icons">
<li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
<li class="twitter"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
<li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
</ul>
</div>
</div>
</nav>
我曾尝试使用此 javascript 代码，但无济于事：
$('.menu-close').on('click', function()
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toright');
$('#theMenu').toggleClass('menu-open');
alert("Test");
);
【问题讨论】：
嘿，我已经用确切的解决方案对您的问题添加了评论。为您创建了 codepen，以便您可以检查代码和输出。请看 你还有其他 CSS 吗？ 简单添加class并在媒体查询width:600下设置样式
【参考方案1】：
您可以使用 CSS 媒体查询在不同的视口/设备上隐藏/显示内容。
【讨论】：
【参考方案2】：这里似乎已经回答了这个问题：https://***.com/a/36289507/378779
基本上，将navbar-expand-* 类之一添加到您的<nav>，例如：
<nav class="menu menu-open navbar-expand-md" id="theMenu">
【讨论】：
【参考方案3】：这里是您需要的链接。我为你创造了笔。请查看下面的链接。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="theMenu">
<a class="navbar-brand" id="menu-logo">
<img src="Final_Logo.png" >
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" id="main-menu">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Writing</a></li>
<li class="nav-item"><a class="nav-link" href="#">Events</a></li>
<li class="nav-item"><a class="nav-link" href="#">Speaking</a></li>
<li class="nav-item"><a class="nav-link" href="#">Music</a></li>
<li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
<li class="twitter"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
<li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
</ul>
</div>
</nav>
https://codepen.io/pgurav/pen/abbQZJL
【讨论】：
【参考方案4】：首先说几点：
您说的是侧边栏，但您的标记在我看来并不像侧边栏，它看起来像一个响应式顶部导航。我会尽我所能理解它，我也会展示一个有效的侧边栏，以防你真正想要的。
您的菜单项位于<ul>（无序列表）中，没有任何<li>（列表项）。 bootsrap js/css 可能需要<li>s 才能正常运行。从技术上讲，没有任何<li> 的<ul> 是有效的html，但<ul> 中允许的唯一内容是<li>s，因此<ul> 内的锚点（或其他任何内容）必须包含在<li>s 内有效。
我不确定你到底想对社交图标做什么，所以我只是以一种看起来合理的方式稍微调整了它们。
我在<html> 元素上添加了overflow-y: scroll;，这样当您在小屏幕上打开菜单时，如果添加滚动条就不会导致移动。根据您的网站设计和内容布局，可能不需要。
让我们从一个非常基本的响应式菜单开始。
基本引导响应菜单
html
overflow-y: scroll;
.social
padding: 4px 8px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Writing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Speaking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Music</a>
</li>
</ul>
<a class="social" href="#"><i class="fa fa-facebook fa-2x"></i></a>
<a class="social" href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a class="social" href="#"><i class="fa fa-instagram fa-2x"></i></a>
</div>
</nav>好的，看起来不错，但菜单中有一张图片。所以我会在菜单中放一张图片，并给它一点 CSS 来设置它的样式。然后对于图像，我们需要一些额外的 CSS 来很好地定位菜单元素：
定位汉堡按钮，使其位于导航栏的底部。我将使用图片的 200px 并减去一些 rem。您可以将
top: calc(100px - 1rem);更改为top: 1rem;以将汉堡包放在顶部，或者如果您希望汉堡包即使在打开时也能粘在导航的底部，则可以更改为bottom: 1rem;。或者只是删除整个规则以使用将汉堡放在垂直中间的引导默认值。将菜单项放置在未折叠时也位于菜单栏底部。
将社交图标也放在底部，但将它们推到右侧。
上面的数字 2 和 3 应该只在菜单未折叠时应用在中间断点之上，所以我会将它们放在媒体查询中以超过 768 像素（引导程序的中间断点）。这也可以通过 bootstraps sass 断点 mixins 来完成，但我们在这里只使用普通的 css。您可以在 css 中的 @media 查询规则中看到这些元素的位置，您可以在其中更改它以将它们推到栏的顶部。或者只是删除这些规则以恢复为引导默认值，它将菜单元素垂直居中，并将社交图标放在它们下方。如果您只是希望图标像其他菜单项一样直接落入菜单，您也可以将社交图标放入菜单
<ul>内的<li>元素中。菜单中有图片
html overflow-y: scroll; .social padding: 4px 4px; .nav-logo width: 200px; height: 100%; .navbar-toggler position: absolute; top: calc(100px - 1rem); right: 1rem; @media all and (min-width: 768px) .navbar-nav position: absolute; bottom: 0; .social-list position: absolute; right: 0.5rem; bottom: 0.5rem;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#"><img class="nav-logo" src="https://i.postimg.cc/nckTrT6T/21.jpg"></a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Writing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Events</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Speaking</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Music</a> </li> </ul> <div class="social-list"> <a class="social" href="#"><i class="fa fa-facebook fa-2x"></i></a> <a class="social" href="#"><i class="fa fa-twitter fa-2x"></i></a> <a class="social" href="#"><i class="fa fa-instagram fa-2x"></i></a> </div> </div> </nav>
好的，但你说这是一个侧边栏。我对引导程序不太熟悉，但我认为 v3 和 v4 默认情况下都没有提供侧边栏导航。可以在here 找到几个引导侧边栏教程。我只是使用上面链接的教程中最基本的版本在这里创建了一个示例。
可折叠侧边栏
$(document).ready(function ()
$('#sidebarCollapse').on('click', function ()
$('#sidebar').toggleClass('active');
);
);/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper
display: flex;
width: 100%;
align-items: stretch;
#sidebar
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
#sidebar.active
margin-left: -250px;
#sidebar .sidebar-header
padding: 20px;
background: #6d7fcc;
#sidebar ul.components
padding: 20px 0;
border-bottom: 1px solid #47748b;
#sidebar ul p
color: #fff;
padding: 10px;
#sidebar ul li a
padding: 10px;
font-size: 1.1em;
display: block;
#sidebar ul li a:hover
color: #7386D5;
background: #fff;
#sidebar ul li.active>a,
a[aria-expanded="true"]
color: #fff;
background: #6d7fcc;
a[data-toggle="collapse"]
position: relative;
.dropdown-toggle::after
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
ul ul a
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
ul.CTAs
padding: 20px;
ul.CTAs a
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
a.download
background: #fff;
color: #7386D5;
a.article,
a.article:hover
background: #6d7fcc !important;
color: #fff !important;
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px)
#sidebar
margin-left: -250px;
#sidebar.active
margin-left: 0;
#sidebarCollapse span
display: none;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a href="#">Home 1</a>
</li>
<li>
<a href="#">Home 2</a>
</li>
<li>
<a href="#">Home 3</a>
</li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
<a href="#">Page 1</a>
</li>
<li>
<a href="#">Page 2</a>
</li>
<li>
<a href="#">Page 3</a>
</li>
</ul>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
<a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">Download source</a>
</li>
<li>
<a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a>
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fa fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
<button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-align-justify"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
</ul>
</div>
</div>
</nav>
<h2>Collapsible Sidebar Using Bootstrap 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>【讨论】：
***.com/questions/65456359/… 你能看看这个引导程序 5 的问题吗？【参考方案5】：我根据关于外部内容的 bs4 文档为您创建了一个示例。
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
在此示例中，代码从顶部折叠，而不是从右侧折叠。实际上我正在休假，并会尝试完成示例以满足您的需求。
附加 JavaScript：
var externalContent = $('#navbarToggleExternalContent'),
execOnResize = function()
// also the next line was only for use in jsfiddle
// in the real world you need to use window.outerWidth
// 992 pixel is the width of breakpoint corresponding to the class "navbar-expand-lg". Feel free to adapt it to fit your needs.
if(window.innerWidth >= 992)
externalContent.addClass('show');
else
externalContent.removeClass('show');
;
// the next line was only addded for jsfiddle
execOnResize();
window.onresize = function(event)
execOnResize();
;
window.addEventListener('load', function()
execOnResize();
)
我还创建了一个小提琴fiddle 要查看它的实际效果，请在 jsfiddle 中调整内部窗口的大小
【讨论】：
【参考方案6】：无论设备如何，您当前的 Javascript 代码都将始终运行。您需要的是一种检查设备是计算机还是手机的方法。
一种方法是使用浏览器的UserAgent:
$('.menu-close').on('click', function()
if(navigator.userAgent.match(/(iPod|iPhone|iPad|android)/))
//mobile
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toright');
$('#theMenu').toggleClass('menu-open');
alert("Test");
);
或者，您可以简单地依赖窗口的宽度（但小型桌面窗口将被视为移动版本）：
if(window.innerWidth <= 767) // a certain threshold value, in pixels
//mobile
//do something
【讨论】：
嗅探用户代理字符串会导致代码难以维护。媒体查询要好得多。 一个字符串的“难以维护”是什么？无论如何，您可以将此检查包装在一个函数中，这样每当您需要更新字符串时，您只需编辑一行代码。 另外，您不能使用 CSS 媒体查询来切换 OP 想要的类名 设备的用户代理字符串随着新设备的生产而变化。这导致每次引入新设备时代码都会中断。当然，您可以将其包装在一个函数中，但它仍然需要您在引入新设备时对其进行更改。最好根据设备的大小（使用 CSS 媒体查询）而不是用户代理字符串来定位设备。引入新设备时无需更新。 OP 不一定要切换类名；这是他们对解决方案的最佳尝试，我认为这不如媒体查询。以上是关于边栏在桌面默认打开，在移动设备上关闭的主要内容，如果未能解决你的问题，请参考以下文章
jquery calendar 停止在桌面上工作，但在移动设备上工作