JavaScript的点击打开和关闭菜单，而不是使用jQuery [英] Javascript click to open and close menu, NOT using jquery
问题描述
我想有一个菜单，我可以点击打开，然后点击关闭。
类似悬停菜单，但与点击，打开，然后单击关闭。
我有三个明显的列表项，与子菜单的下面。
这些被隐藏的CSS，显示：无。
我可以让他们展示，与关键字这，而一个for循环检查，如果任何UL，有更多的则1项，然后单击时列表将打开。
至于我能理解这个code，我得到了一些帮助在这里早。
现在，我已阅读，观看从buckysroom教程，觉得我明白了很多，至少约阵列，一切都在code，现在我能够理解，至少。我此刻的这个code。
函数showMenu（parentElement）{
VAR ULS = parentElement.getElementsByTagName（UL）;
如果（uls.length大于0）
ULS [0] .setAttribute（风格，显示：块）; }功能负荷（）{
VAR LIS = document.getElementsByTagName（礼）;
对于（VAR I = 0; I＆LT; lis.length;我++）{
LIS [I]阅读进度（点击，函数（）{
showMenu（本）;
}）;
}
}
我的理解，最后，'for'循环，我看到这个code打开任何数组，还是喜欢，任何礼有超过1（[0]）项目，为0到1在数组中，遍历，看它是否有孩子。如果是这样，它会打开'这个'李时珍'UL'。
由于负载功能，包含showMenu功能，我学到了一点，使用的功能函数内部，而不是复制自己，使用数组和变量，并把它们以某种方式分配给海誓山盟。 Buckysroom教程，至少帮助我理解为多。
现在..
我的问题是我不知道的JavaScript足以让我的脑海里解决这个问题，我宁可不使用jQuery，但学会这可能是与普通的JavaScript来实现。
任何指针将帮助了很多，我曾尝试以下;
添加唯一的ID对我的三个UL的，所以我知道其实是可以打开它们与上述code，我能够接近他们，另外code，设置回显示：无
问题的话，是我没有机会再次打开它们，我的理解，我很想念一些片，像stopPropagation或者，使用addEventListener - 点击，此第二部分。正如你可能知道，使用addEventListener，是我从code在这里了。
函数Meny1（）{ 变种unorderedList =的document.getElementById（ul_1）; VAR LIS = unorderedList.getElementsByTagName（「李先生」）;
对于（VAR I = 0; I＆LT; lis.length;我++）{ LIS [I] .setAttribute（风格，显示：无）; }
}
我想通了，我可以指定每个菜单项与数字，如[23]，而不是[I]，目标单一的菜单项，复制行是这样的：
利斯[23] .setAttribute（风格，显示：无）;
LIS [24] .setAttribute（风格，显示：无）;
但据我了解，这是一个不好的做法，因为这是可怕的，如果我再添加一个菜单项或删除一个，也是办法不多复制编码..
我的想法是，我想是这样的：
HTML：
＆LT; DIV ID =cssmenu＆GT;＆LT; / DIV＆GT;
＆LT; UL ID =ul_1＆GT;＆LT;李I标记有很多李时珍在每个'UL'＆LT; /李＆GT;＆LT; / UL＆GT;
＆LT; UL ID =ul_2＆GT;＆LT;李I标记有很多李时珍在每个'UL'＆LT; /李＆GT;＆LT; / UL＆GT;
＆LT; UL ID =ul_3＆GT;＆LT;李I标记有很多李时珍在每个'UL'＆LT; /李＆GT;＆LT; / UL＆GT;
CSS：
#cssmenu {显示：块;}
#cssmenu UL李UL {显示：无}
我的JS应该如何思考，我不使用类：
（我没有这样做，因为W3C验证指出，我不应该）。
函数showAndCloseMenu1（）{
变种ul_1 =的document.getElementById（ul_1）;
如果（上的mouseClicked || ul_2上的mouseClicked ul_3）{
close.ul_1（本）
}
如果（的mouseClicked ul_1）{
的style.display =块;
}
}
然后是同样的，自然的ul_2和ul_3，我还没有得到考虑实现所有到一个code不够好，但我知道这是可能的，当然，全局变量，并通过使用属性
请问有没有谁可以帮我？
我曾尝试使用jQuery，没有成功，正如我所说，宁可不要，因为我渴望学习JavaScript发挥到淋漓尽致延长！我可以阅读的JavaScript，jQuery是只是一堆dollarsigns给我的，用简化的Javascript里面。
http://fiddle.jshell.net/ufcsccy3/
下面是一个小提琴，但由于它在浏览器中做的菜单没有工作，但你的想法，如果你看那里，它的菜单上的左侧。
我怎么能有一个显示/隐藏功能，在我的JavaScript导航？
我在正确的路径思考在这里，因为我看到它，类差别不大，但可能为我节省了一些编码的空间你。
感谢所有帮助任何这一点，似乎无法让我的头围绕这个工作解决方案！
我想有它喜欢当我点击ul_1第一次，它会打开。如果我再次点击它，我希望它关闭。
如果ul_1是开放的，我点击ul_2，或ul_3，我想在我的观点再次打开那一个，并关闭ul_1，还挺标准的菜单导航。
只需拨动为开放式菜单中选择一个ID。方法一，的onclick ，这确实说明了一切。
函数showmenu（ELEM）{\r
//清除任何当前打开的菜单\r
变种openMenu =的document.getElementById（activeMenu）;\r
如果（openMenu）{\r
openMenu.removeAttribute（ID）;\r
//停止，如果我们只是关闭当前菜单\r
如果（openMenu === ELEM）{\r
返回;\r
}\r
}\r
\r
//只适用于它，如果元素其实有李子节点。\r
//可选：是否依然工作，没有if语句。\r
如果（elem.getElementsByTagName（「李先生」）长度方式＆gt; 0）{\r
elem.setAttribute（ID，activeMenu）;\r
}\r
} \r
UL {\r
列表样式：无;\r
保证金：0;\r
填充：0;\r
}\r
UL李{\r
浮动：左;\r
填充：0 10px的;\r
}\r
UL UL {\r
显示：无;\r
}\r
UL UL李{\r
飘：无;\r
}\r
#activeMenu UL {\r
显示：块;\r
} \r
＆LT; UL＆GT;\r
＆LT;李的onclick =showmenu（本）＆GT;菜单项目1 LT; /李＆GT;\r
＆LT;李的onclick =showmenu（本）＆GT;下拉1\r
＆LT; UL＆GT;\r
＆LT;立GT; DD1项目1＆LT; /李＆GT;\r
＆LT;立GT; DD1项目2'; /李＆GT;\r
＆LT; / UL＆GT;\r
＆LT; /李＆GT;\r
＆LT;李的onclick =showmenu（本）＆GT;下拉2\r
＆LT; UL＆GT;\r
＆LT;立GT; DD2项目1＆LT; /李＆GT;\r
＆LT;立GT; DD2项目2'; /李＆GT;\r
＆LT; / UL＆GT;\r
＆LT; /李＆GT;\r
＆LT; / UL＆GT; \r
请注意，我用的onclick 只是为了简单起见。添加你做的单击事件才是正道。
I want to have a menu, that I can click on to open, and click on to close. Similar to a hover menu, but with clicking, to open, and clicking to close. I have three visible list items, with submenu's under.
These are hidden with css, display:none. I can get them to show, with the keyword "this", and a for loop for checking if any 'ul', have more then 1 item, then list will open when clicked.
As far as I could understand this code, I got some help here earlier. Now I have read, and watched tutorials from buckysroom, and feel I understand a lot more, at least about arrays, and everything in the code, I can now understand, at least. I have this code at the moment.
function showMenu(parentElement){
var uls= parentElement.getElementsByTagName("ul");
if (uls.length > 0)
uls[0].setAttribute("style","display: block");
}
function load(){
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", function(){
showMenu(this);
});
}
}
As I understood, finally, the 'for' loop, I see that this code opens any array, or like, any 'li' that has more than 1 ( [0] ) item, as 0 is 1 in array, and loops through to see if it has children. If it does, it opens 'this' 'li's' 'ul'.
Since the load function, contains the showMenu function, and I have learned a little, to use functions inside functions, rather than copy myself, use arrays and variables, and assign them to eachother somehow. Buckysroom tutorials, at least helped me understand as much.
Now.. My problem is I do not know enough Javascript to get my mind around this, and I would rather not use jQuery, but learn how this could be achieved with plain Javascript.
Any pointers would help alot, I have tried the following;
Adding unique Id's to my three ul's, so I know can in fact open them with the above code, and I am able to close them, with another code, setting it back to "display:none".
The problem then, is I do not have the opportunity to open them again, and I understand that I am missing some piece, like stopPropagation or maybe, using addEventListener - Click, for this second part. As you may understand, the addeventListener, is something I got from a code in here.
function Meny1(){
var unorderedList = document.getElementById("ul_1");
var lis = unorderedList.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute("style","display: none");
}
}
I figured out, that I can specify each menu-item with numbers, like [23], instead of [i], to target a single menu item, copy that line like this:
lis[23].setAttribute("style","display: none");
lis[24].setAttribute("style","display: none");
But as I understand, that is a bad practice, as it is terrible if I am to add another menu item, or remove one, and also is way to much copy-coding..
My thought, is that I want something like this: html:
<div id ="cssmenu"></div>
<ul id="ul_1"><li>I have many li's in each 'ul'</li></ul>
<ul id="ul_2"><li>I have many li's in each 'ul'</li></ul>
<ul id="ul_3"><li>I have many li's in each 'ul'</li></ul>
css:
#cssmenu{display:block;}
#cssmenu ul li ul{display:none}
My thinking of how the js should be, and I DON'T use CLASSES: (I didn't do this, as w3c validator pointed out that I shouldn't).
function showAndCloseMenu1(){
var ul_1 = document.getElementbyId("ul_1");
if(mouseclicked on ul_2 || mouseclicked on ul_3){
close.ul_1(this)
}
if(mouseClicked ul_1){
style.display = "block";
}
}
And then the same naturally for ul_2 and ul_3, I have not gotten good enough yet to think about implementing all into one code, but I know that it is possible of course, with global variables, and by using attributes.
Is there Anyone who can help me with this?
I have tried to use jQuery, with no success, and as I said, would rather not, as I am eager to learn Javascript to the fullest extend! And I can read Javascript, jQuery is just a bunch of dollarsigns to me, with simplified Javascript inside.
http://fiddle.jshell.net/ufcsccy3/
Here is a fiddle, but the menu doesn't work as it does in browsers, but you get the idea if you look there, its the menu on the left.
How can I have a show/hide function, in my navigation with Javascript? Am I thinking in the correct path here, as I see it, classes makes little difference, but maybe saves me some coding space thou.
Thanks for any help whatsoever on this, cannot seem to get my head around a working solution for this! I would like to have it like when I click on ul_1 first time, it opens. If I click it again, I want it to close. If ul_1 is open, and I click ul_2, or ul_3, I want to open that one, and close ul_1 again, kinda standard menu navigation in my perspective.
Just toggle an ID for the open menu. One method, onclick, which does it all.
function showmenu(elem) {
// Clear any currently open menu
var openMenu = document.getElementById("activeMenu");
if (openMenu) {
openMenu.removeAttribute("id");
// Stop if we're just closing the current menu
if (openMenu === elem) {
return;
}
}
// Only apply it if the element actually has LI child nodes.
// OPTIONAL: Will still work without if statement.
if (elem.getElementsByTagName("li").length > 0) {
elem.setAttribute("id", "activeMenu");
}
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
float: left;
padding: 0 10px;
}
ul ul {
display: none;
}
ul ul li {
float: none;
}
#activeMenu ul {
display: block;
}
<ul>
<li onclick="showmenu(this)">Menu Item 1</li>
<li onclick="showmenu(this)">Drop Down 1
<ul>
<li>DD1 Item 1</li>
<li>DD1 Item 2</li>
</ul>
</li>
<li onclick="showmenu(this)">Drop Down 2
<ul>
<li>DD2 Item 1</li>
<li>DD2 Item 2</li>
</ul>
</li>
</ul>
Note that I used onclick just for simplicity. Adding the click event you did is the right way.
这篇关于JavaScript的点击打开和关闭菜单，而不是使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
