- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个侧边栏,可以在按下图像时显示。但是,当我在侧边栏外单击时,任何不是侧边栏的区域都不会关闭。我尝试查找它,但没有找到解决方案。
我不太熟悉 html,所以这可能只是一个简单的修复。
var side = document.getElementById('mySidenav');
sideBarOpen = false;
function openNav() {
document.getElementById("mySidenav").style.width = "300px";
document.getElementById("arrow").style.transform = "rotate(90deg)";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
sideBarOpen = true;
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("arrow").style.transform = "rotate(0deg)";
document.body.style.backgroundColor = "white";
sideBarOpen = false;
}
window.onclick = function(event) {
if (sideBarOpen) {
if (!event.target == side) {
closeNav();
}
}
}
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#"><img src="clubsIcon.svg" style="width: 30px; height: 30px;" align="center"></a>
<a href="#"> → <img src="srIcon.svg" style="width: 30px; height: 30px;" align="center"></a>
<a href="#"><img src="cricketIcon.svg" style="width: 30px; height: 30px;" align="center"></a>
<a href="#"><img src="fblaIcon.svg" style="width: 30px; height: 30px;" align="center"></a>
<a href="#"><img src="roboticsIcon.svg" style="width: 30px; height: 30px;" align="center"></a>
</div>
<div style="font-size:30px;cursor:pointer;" onclick="openNav()">
<img src="arrow.png" style="width: 20px; height: 20px;" id="arrow" class="arrowclass">
</div>
最佳答案
您的代码中错误的行是这样的:
if (!event.target == side) {
as !event.target
将返回一个 bool 值,然后您可以将其与元素进行比较。所以你总是会从这种比较中得到否定的回应。
应该是:
if (event.target !== side) {
一旦解决了这个问题,您还会遇到逻辑问题,因为开启按钮位于侧边栏之外。除了您现有的检查它不是来自侧边栏之外,您还需要添加检查窗口点击事件不是来自开启按钮。请参阅下面的代码更改:
<div id="openIcon" style="font-size:30px;cursor:pointer;" onclick="openNav()">
<img src="arrow.png" style="width: 20px; height: 20px;" id="arrow" class="arrowclass">
</div>
脚本:
window.onclick = function(event) {
if (sideBarOpen) {
if (event.target !== side && event.target !== document.getElementById('openIcon')) {
closeNav();
}
}
}
关于javascript - HTML - 在其外部单击时边栏不关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51162152/
这个左侧边栏文本使栏本应位于的位置令人震惊。需要帮助将文本放置在隔间 (li) 内而不重叠。只需要调整一下。我已经有了 font-size %,但仍然无法正常工作。谢谢! .menuleft {
我以这种方式添加标记和侧边栏: //' + name + ''; return marker; } // This function picks u
是否可以让侧边导航菜单从左侧过渡,同时推送其他内容以及不透明的颜色叠加层? 我尝试在桌面浏览器中完美运行的版本,但当我切换到移动设备时,边栏会扩展页面的高度并且页面失去流动性。 示例:已更新 http
全部! 我写这篇文章是因为我试图弄清楚我将如何处理以下内容: 我想编写一个应用程序(特别是 Electron + Vue),它使用窗口左侧的语义 UI 侧边栏提供导航和其他功能。 问题是,我只想让侧边
这是我当前的代码,我已经设法用折叠按钮隐藏侧边栏,但我希望它只在小型设备上折叠,就像引导导航栏那样。 PROFILE
我一直在 Weebly 网站上工作:https://testerbuyer.weebly.com/ 问题出在左侧的侧边栏菜单上。 如果侧边栏菜单只有几个菜单项,侧边栏会覆盖页面的整个高度并粘在页面上。
嗨聪明的 CSS 大师等 我刚刚将 Google 自定义搜索小部件添加到我的 wordpress 网站我对样式有疑问吗? 它应该像这个侧边栏一样出现 - http://googlecustomsear
我正在尝试将 Eclipse 用于我的计算机科学类(class),但左侧的栏不见了。有谁知道修复? 最佳答案 你是说包浏览器吗?您可以在这里切换 关于java - Eclipse IDE 边栏(导航)
希望将文件夹添加到 Finder 的侧边栏收藏夹中,但对于现代 macOS,似乎所有途径都已完全弃用。所有 LSSharedFileList* 现在都无法使用,根据 sdef/System/Libra
我正在尝试使用语义 Ui 组件制作一个具有反应的 Web 应用程序。但是,我真的很难让主要内容组件占据整个屏幕(见图)。我希望主要内容组件填满其余空间,但它似乎只占用了它需要的空间。最终我希望能够让侧
我目前制作了一个包含侧边栏和内容的容器,但是当我向侧边栏添加的文本多于向容器添加的文本时,第二个侧边栏会稍微 float 到一边。这些是我正在使用的代码。 HTML: Pl
每当我打开任何 Internet 浏览器时,在右侧会自动打开一个侧页,占确切页面的一半,它有一些 HTML 代码。它一次又一次地打开和关闭它自己。这是为什么?如何阻止它?请帮助我。 最佳答案 我相信这
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
我是一名优秀的程序员,十分优秀!