[英]Is there a better way than this to create a toggle function just with JavaScript (no JQuery at all)?
I have a nav bar in the form of a ul with several li elements and with the last li (named 'more') having its own sub-menu in the form of another ul. 我有一个带有几个li元素的ul形式的导航栏,最后一个li(名为“ more”)具有另一个ul形式的自己的子菜单。 I was trying (and was successful) in making it so that the sub-menu's original state is visibility:visible;
我正在尝试(并且成功完成了)使子菜单的原始状态为visible:visible;。 and then when the user clicks on li name 'more' it would toggle between visibility: visible;
然后,当用户单击名称“更多”时,它将在可见性之间切换:可见; and visibility: hidden;
和可见性:隐藏; I used JavaScript and a counter with an if statement.
我使用JavaScript和带有if语句的计数器。 The reason why I used the counter was because when I tried:
我使用计数器的原因是因为我尝试过:
if(document.querySelector('#subMenu').style.visibility == "hidden")...;
But it wouldn't toggle. 但这不会切换。
My questions are: 我的问题是:
Would this method of creating the toggle function be deemed acceptable in a professional front end developer workplace? 在专业的前端开发人员工作场所中,这种创建切换功能的方法是否被认为可以接受?
Is there a better way to toggle between visible and hidden on clicking an element using JavaScript ONLY (trying to get better at JavaScript)? 是否有更好的方法可以在仅使用JavaScript单击元素时在可见和隐藏之间切换(试图更好地使用JavaScript)?
The code is as follows(I have only included the relevant code): 代码如下(我只包含了相关代码):
HTML 的HTML
<ol id = "leftNav" class = "bothNavs">
<li class = "navs" id = "more">More<div class = "arrow"></div>
<ul class = "subMenu">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
</ol>
CSS 的CSS
.subMenu {
width: 160%;
padding: 5px 0px;
padding-left: 7px;
margin-left: 6px;
position: absolute;
top: 100%;
left:0px;
visibility: hidden;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background: #2D2D2D;
list-style: outside none none;
z-index: 1001;
}
JavaScript 的JavaScript
var more = document.querySelector('#more');
var subMenu = document.querySelector('.subMenu');
var counter =0;
more.addEventListener("click", toggle);
function toggle () {
if(counter === 0){
subMenu.style.visibility = "visible";
counter += 1;
} else {
subMenu.style.visibility = "hidden";
counter -= 1;
}
};
Thank you in advance for your answers. 预先感谢您的回答。
I feel a better way of toggling visibility (or any style) is to toggle a class. 我觉得切换可见性(或任何样式)的更好方法是切换类。
Consider something like this in your CSS: 在CSS中考虑以下内容:
.subMenu.is-visible {
visibility: visible;
}
Then your function just needs to look like this: 然后您的函数只需要看起来像这样:
var menu = document.querySelector('.subMenu');
document.getElementById('more').addEventListener('click', function () {
menu.classList.toggle('is-visible');
}, false);
For a toggle you should use a boolean value rather than int: 对于切换,您应该使用布尔值而不是int:
var more = document.querySelector('#more'); var subMenu = document.querySelector('.subMenu'); var clicked = false; more.addEventListener("click", function(evt) { // This is called a ternary operator, it's basically // a really simple if/else statement subMenu.style.visibility = (clicked) ? "visible " : "hidden"; // This will set clicked to the opposite (not) value of what // it currently is. Being that we're using a boolean // it will toggle true/false clicked = !clicked; });
You should also read (and vote for) this - What is the difference between visibility:hidden and display:none? 您还应该阅读(并投赞成票) -visible:hidden和display:none有什么区别?
You should not embed a <ul>
inside a <li>
element. 您不应该在
<li>
元素中嵌入<ul>
。 There's all sorts of reasons why, but mostly it messes with the hierarchy and makes the HTML less meaningful. 造成这种情况的原因有很多种,但大多数情况下,它会扰乱层次结构并使HTML的意义降低。
Also the last time I had to tackle this problem it ended up looking something like this: 同样,上一次我不得不解决这个问题时,它最终看起来像这样:
var subMenu = document.querySelector('.subMenu');
if (clicked) {
subMenu.style.visibility = "visible";
} else {
subMenu.style.visibility = "hidden";
}
Consider making it id instead of class incase you have other submenus it interferes with. 如果您有其他子菜单受到干扰,请考虑将其设置为id而不是class。
If you don't really need a counter, use a boolean: 如果您确实不需要计数器,请使用布尔值:
var more = document.querySelector('#more'); var subMenu = document.querySelector('.subMenu'); more.addEventListener("click", toggle); function toggle () { subMenu.style.visibility = subMenu.style.visibility != "hidden" ? "hidden" : "visible"; };
.subMenu { width: 60%; background: #2D2D2D; list-style: outside none none; color: white }
<ol id = "leftNav" class = "bothNavs"> <li class = "navs" id = "more">More<div class = "arrow"></div> <ul class = "subMenu" style="visibility: hidden"> <li>One</li> <li>Two</li> <li>Three</li> </ul> </li> </ol>
Ideally, you'd modify this code to toggle a class instead of an inline CSS style, as James suggested in his answer. 理想情况下,如James在他的回答中所建议的那样,您将修改此代码以切换类而不是内联CSS样式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.