个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我是 HTML5、CSS 和 Javascript 的新手。如果我的问题很基本，我深表歉意。我正在开发响应式导航菜单。当浏览器的宽度大于 500 时，会出现垂直导航栏。一旦屏幕页面的大小小于 500(例如在手机上)，水平导航栏应该被隐藏，而不是显示汉堡包图标。单击汉堡菜单时，将在汉堡图标下方显示一个垂直导航栏。但问题是当我在导航栏上调用 setAttribute("visibility", "visible") 或 setAttribute("visibility", "hidden") 时它不起作用。我不确定为什么。 setAttribute 在屏幕加载时间或单击汉堡包图标时调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/page-main.css">
<link rel="stylesheet" href="./css/master.css">
<link rel="stylesheet" href="./css/footer.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">
<!-- fonts -->
<title>Home Page</title>
</head>
<body onload="hideORShow()">
<header>
<nav id="navigation-links" class="navbar navigation-box">
<div class="col-1of6 nav-item">
<a class="main-nav-item-page-index" href="./index.html">Home</a>
</div>
<div class="col-1of6 nav-item" >
<a class="main-nav-item-page-index" href="./spring-summer.html">Fall</a>
</div>
<div class="col-1of6 nav-item">
<a class="main-nav-item-page-index" href="./fall-winter.html">Winter</a>
</div>
<div class="col-1of6 nav-item">
<a class="main-nav-item-page-index" href="./leather.html">Leather</a>
</div>
</nav>
<div class="open-slide">
<a href="#">
<svg id="hamburgur-icon" onClick="openSlideMenu()">
<path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
</svg>
</a>
</div>
<div id="side-menu" class="side-nav" >
<a href="#" class="btn-close" onClick="closeSlideMenu()">×</a>
<a class="main-nav-item-page-index" href="./index.html">Home</a>
<a class="main-nav-item-page-index" href="./spring-summer.html">Fall</a>
<a class="main-nav-item-page-index" href="./fall-winter.html">Winter</a>
<a class="main-nav-item-page-index" href="./leather.html">Leather</a>
</div>
</header>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
这是我的 javascript 文件:
var hamburgerMenu = document.getElementById('hamburgur-icon');
var slidingMenu = document.getElementById('side-menu');
var navigationBox = document.getElementById('navigation-links');
function hideORShow(){
if(width > 500){
console.log("Inside of hideOrShow function - Window width is greater than 500px, hiding hamburger");
hamburgerMenu.setAttribute("visibility","hidden");
slidingMenu.setAttribute("visibility","hidden");
}
else{
console.log("Inside of hideOrShow function - Window width is less than 500px, hiding hamburger");
navigationBox.setAttribute("visibility","hidden");
hamburgerMenu.setAttribute("visibility","visible");
}
}
function openSlideMenu(){
console.log("hamburger btn clicked");
slidingMenu.setAttribute("visibility","visible");
slidingMenu.setAttribute("background-color","red");
}
function closeSlideMenu(){
console.log("close btn clicked");
slidingMenu.setAttribute("visibility","hidden");
}
我在 chrome 调试器中看到事件被触发后可见性属性发生了变化，但我仍然没有在浏览器中看到视觉变化。例如，当我单击关闭按钮时，汉堡包图标下方的垂直导航栏仍然存在。我将不胜感激任何提示。
最佳答案
But the problem is when I call setAttribute("visibility", "visible") or setAttribute("visibility", "hidden") ...
可见性是一种 CSS 样式，而不是元素属性。这就是它不起作用的原因。尝试替换任何看起来像这样的行:
navigationBox.setAttribute("visibility","hidden");
hamburgerMenu.setAttribute("visibility","visible");
与:
navigationBox.style.visibility = "hidden";
hamburgerMenu.style.visibility = "visible";
后者实际上为元素设置了 visibility CSS 样式，而前者为元素设置了一个属性(作为属性的可见性本身不做任何事情)。
关于javascript - 对标记元素的 setAttribute 调用不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46943273/
25
4
0
我有两个超链接。我在单击其他超链接时隐藏了一个超链接，反之亦然。它在我的本地机器上对我来说工作得非常好。但当我从在线服务器上传并运行相同的功能时，问题就出现了。 在服务器上，与本地计算机实例相比，相关
我正在尝试编写一个简单的 Javascript 程序，它将从数组中获取元素并以内联方式显示它们。问题是我使用的 Javascript 无法识别与 标签关联的 CSS，用于显示内联元素，从而显示 CSS
我实际上是在尝试发表评论并在评论输入时编辑选项，它将通过 ajax 显示在“div”中。 "; while($m=oci_fetch_assoc($s)) { echo "Name :
目标:将数据属性添加到 leaflet.js 标记元素标记 我有一个带有 map 和“聚光灯”区域的项目。 map 使用 leaflet.js 填充位置 当我点击 map 上的某个图钉时，我想让它对应
我在 HTML 中嵌入了一个带有标记定义的 SVG。标记定义只是一个带有 onmouseover 事件的圆圈。然后我在这样的路径上使用标记...
我有一个 xml 提要，我正试图从中提取两个值。我将在下面粘贴基本的 xml 提要。 Mostly Cloudy 为了解析这个提要，我在 Javascript 中有以下内容: $(doc
我很抱歉为了这么简单的操作来找你们帮忙，但我真的用尽了我所有的工具来试图解决这个问题。我试过通过部分 xpath、完整 xpath 和各种 css 选择器进行定位。 我想知道如何找到这个似乎与 jqu
我是一名优秀的程序员,十分优秀！