我目前正在为我的网站创建多个导航按钮，每个按钮都会显示菜单。
例如，这是第一个菜单：
<div class="outer-bar"> <ul class="down-bar" style="list-style:hidden"> <li> <label id="down-nav-1" class="down-nav" onclick="Dropdown1()">Knives <b class="caret_down">▼</b></label> <div class="mainsizer"> <div class="dropdown-menus" id="dropdown-menu-1"> <a href=/?search=M9%20Bayonet&type=weapon class="Text1"><label class="m9_bayonet" style="width:30px;height:30px;position:absolute;top:5px;left:5px;cursor:pointer;"></label>M9 Bayonet</a> <a href=/?search=Karambit&type=weapon class="Text1"><label class="karambit" style="width:30px;height:30px;position:absolute;left:5px;top:59px;cursor:pointer;"></label>Karambit</a> <a href=/?search=Bayonet&type=weapon class="Text1"><label class="bayonet" style="width:30px;height:30px;position:absolute;left:5px;top:116px;cursor:pointer;"></label>Bayonet</a> <a href=/?search=Butterfly%20Knife&type=weapon class="Text1"><label class="butterfly" style="width:30px;height:30px;position:absolute;left:5px;top:170px;cursor:pointer;"></label>Butterfly Knife</a> <a href=/?search=Flip%20Knife&type=weapon class="Text1"><label class="flip" style="width:30px;height:30px;position:absolute;left:5px;top:225px;cursor:pointer;"></label>Flip Knife</a> <a href=/?search=Falchion%20Knife&type=weapon class="Text1"><label class="falchion" style="width:30px;height:30px;position:absolute;left:5px;top:280px;cursor:pointer;"></label>Falchion Knife</a> <a href=/?search=Gut%20Knife&type=weapon class="Text1"><label class="gut" style="width:30px;height:30px;position:absolute;left:5px;top:334.5px;cursor:pointer;"></label>Gut Knife</a> <a href=/?search=Shadow%20Daggers&type=weapon class="Text1"><label class="shadow" style="width:30px;height:30px;position:absolute;left:5px;top:390px;cursor:pointer;"></label>Shadow Daggers</a> <a href=/?search=Huntsman%20Knife&type=weapon class="Text1"><label class="huntsman" style="width:30px;height:30px;position:absolute;left:5px;top:444px;cursor:pointer;"></label>Huntsman Knife</a> <a href=/?search=Bowie%20Knife&type=weapon class="Text1"><label class="bowie" style="width:30px;height:30px;position:absolute;left:5px;top:498.5px;cursor:pointer;"></label>Bowie Knife</a> </div> </div> </li>正如您在<label>元素#down-nav-1上看到的那样，它具有链接到函数Dropdown1() onclick属性，并且菜单Display为None和时间。
这是Javascript中的函数本身：
function Dropdown1() { document.getElementById("dropdown-menu-1").style.display = "inline-block"; document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray;background-color: gray;border-radius: 10px;"; }所有这些都可以正常工作，请看小提琴 。 （只有“刀具”按钮才能工作）。
但后来我尝试添加一个功能，所以当用户点击菜单外，显示器将再次设置为“无”：
function Dropdown1() { document.getElementById("dropdown-menu-1").style.display = "inline-block"; document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray;background-color: gray;border-radius: 10px;"; } $(document).click(function(event) { if(!$(event.target).closest('#dropdown-menu-1').length) { if ( ($('#dropdown-menu-1').style.display = "None" ) { $('#dropdown-menu-1').style.display = "inline-block"; } } })添加此代码后，单击按钮时将无法执行任何操作。 （ 见结果 ）。
我不明白那里的具体问题，但请注意，我是Javascript的新手，并且不知道那里有很多东西。
问题是什么？ 我可以用纯Javascript做这个，还是应该在这种情况下使用jquery？
I am currently creating multiple navigation buttons for my website, each of them would show up menus.
So as example, this is the first menu:
<div class="outer-bar"> <ul class="down-bar" style="list-style:hidden"> <li> <label id="down-nav-1" class="down-nav" onclick="Dropdown1()">Knives <b class="caret_down">▼</b></label> <div class="mainsizer"> <div class="dropdown-menus" id="dropdown-menu-1"> <a href=/?search=M9%20Bayonet&type=weapon class="Text1"><label class="m9_bayonet" style="width:30px;height:30px;position:absolute;top:5px;left:5px;cursor:pointer;"></label>M9 Bayonet</a> <a href=/?search=Karambit&type=weapon class="Text1"><label class="karambit" style="width:30px;height:30px;position:absolute;left:5px;top:59px;cursor:pointer;"></label>Karambit</a> <a href=/?search=Bayonet&type=weapon class="Text1"><label class="bayonet" style="width:30px;height:30px;position:absolute;left:5px;top:116px;cursor:pointer;"></label>Bayonet</a> <a href=/?search=Butterfly%20Knife&type=weapon class="Text1"><label class="butterfly" style="width:30px;height:30px;position:absolute;left:5px;top:170px;cursor:pointer;"></label>Butterfly Knife</a> <a href=/?search=Flip%20Knife&type=weapon class="Text1"><label class="flip" style="width:30px;height:30px;position:absolute;left:5px;top:225px;cursor:pointer;"></label>Flip Knife</a> <a href=/?search=Falchion%20Knife&type=weapon class="Text1"><label class="falchion" style="width:30px;height:30px;position:absolute;left:5px;top:280px;cursor:pointer;"></label>Falchion Knife</a> <a href=/?search=Gut%20Knife&type=weapon class="Text1"><label class="gut" style="width:30px;height:30px;position:absolute;left:5px;top:334.5px;cursor:pointer;"></label>Gut Knife</a> <a href=/?search=Shadow%20Daggers&type=weapon class="Text1"><label class="shadow" style="width:30px;height:30px;position:absolute;left:5px;top:390px;cursor:pointer;"></label>Shadow Daggers</a> <a href=/?search=Huntsman%20Knife&type=weapon class="Text1"><label class="huntsman" style="width:30px;height:30px;position:absolute;left:5px;top:444px;cursor:pointer;"></label>Huntsman Knife</a> <a href=/?search=Bowie%20Knife&type=weapon class="Text1"><label class="bowie" style="width:30px;height:30px;position:absolute;left:5px;top:498.5px;cursor:pointer;"></label>Bowie Knife</a> </div> </div> </li>So as you see on the <label> element #down-nav-1, it has onclick attribute linked to the function Dropdown1() and Display of menu is None and the time.
And this is the function itself in Javascript:
function Dropdown1() { document.getElementById("dropdown-menu-1").style.display = "inline-block"; document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray;background-color: gray;border-radius: 10px;"; }All of this would simply work fine, please see Fiddle. (Only "Knives" button works atm).
But then i tried to add a function, so when user clicks outside of the menu, the display would be set to 'None' again:
function Dropdown1() { document.getElementById("dropdown-menu-1").style.display = "inline-block"; document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray;background-color: gray;border-radius: 10px;"; } $(document).click(function(event) { if(!$(event.target).closest('#dropdown-menu-1').length) { if ( ($('#dropdown-menu-1').style.display = "None" ) { $('#dropdown-menu-1').style.display = "inline-block"; } } })And after adding this code, there would be no action when clicking the button. ( see the result ).
I don't understand the specific problem in there, but please note, i am new to Javascript, and don't know many things in there.
What could the problem be? can i do this with pure Javascript or should i use jquery in this case?
最满意答案
代码中存在语法和逻辑错误。
更新了您的代码：
function Dropdown1() { if ($('#dropdown-menu-1').css("display") !== "none") { $('#dropdown-menu-1').css("display", "none"); } else { $('#dropdown-menu-1').css("display", "inline-block"); } document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray; background-color: gray; border-radius: 10px;"; } $(document).click(function(event) { if (!$(event.target).closest('.outer-bar').length) { if ($('#dropdown-menu-1').css("display") !== "none") { $('#dropdown-menu-1').css("display", "none"); } } });在if块内部进行比较时，请使用==或===而不是=运算符。
if块表达式中也未关闭括号。
另外， style.display是与JavaScript对象关联的属性，而不是jQuery对象。 您应该使用.css("display")作为jQuery对象。
更新了工作小提琴： https ： //jsfiddle.net/nashcheez/bjfz7twq/7/
There is syntax & logical error in the code.
Updated your code:
function Dropdown1() { if ($('#dropdown-menu-1').css("display") !== "none") { $('#dropdown-menu-1').css("display", "none"); } else { $('#dropdown-menu-1').css("display", "inline-block"); } document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray; background-color: gray; border-radius: 10px;"; } $(document).click(function(event) { if (!$(event.target).closest('.outer-bar').length) { if ($('#dropdown-menu-1').css("display") !== "none") { $('#dropdown-menu-1').css("display", "none"); } } });Please use == or === instead of the = operator when comparing inside your if blocks.
Also brackets were not closed in the if block expressions.
Also, style.display is a property associated to a JavaScript object and not a jQuery object. You should use .css("display") for a jQuery object.
Updated working fiddle: https://jsfiddle.net/nashcheez/bjfz7twq/7/
使用文档点击功能事件后菜单不显示(Menu not showing up after using document click function event)我目前正在为我的网站创建多个导航按钮，每个按钮都会显示菜单。
例如，这是第一个菜单：
<div class="outer-bar"> <ul class="down-bar" style="list-style:hidden"> <li> <label id="down-nav-1" class="down-nav" onclick="Dropdown1()">Knives <b class="caret_down">▼</b></label> <div class="mainsizer"> <div class="dropdown-menus" id="dropdown-menu-1"> <a href=/?search=M9%20Bayonet&type=weapon class="Text1"><label class="m9_bayonet" style="width:30px;height:30px;position:absolute;top:5px;left:5px;cursor:pointer;"></label>M9 Bayonet</a> <a href=/?search=Karambit&type=weapon class="Text1"><label class="karambit" style="width:30px;height:30px;position:absolute;left:5px;top:59px;cursor:pointer;"></label>Karambit</a> <a href=/?search=Bayonet&type=weapon class="Text1"><label class="bayonet" style="width:30px;height:30px;position:absolute;left:5px;top:116px;cursor:pointer;"></label>Bayonet</a> <a href=/?search=Butterfly%20Knife&type=weapon class="Text1"><label class="butterfly" style="width:30px;height:30px;position:absolute;left:5px;top:170px;cursor:pointer;"></label>Butterfly Knife</a> <a href=/?search=Flip%20Knife&type=weapon class="Text1"><label class="flip" style="width:30px;height:30px;position:absolute;left:5px;top:225px;cursor:pointer;"></label>Flip Knife</a> <a href=/?search=Falchion%20Knife&type=weapon class="Text1"><label class="falchion" style="width:30px;height:30px;position:absolute;left:5px;top:280px;cursor:pointer;"></label>Falchion Knife</a> <a href=/?search=Gut%20Knife&type=weapon class="Text1"><label class="gut" style="width:30px;height:30px;position:absolute;left:5px;top:334.5px;cursor:pointer;"></label>Gut Knife</a> <a href=/?search=Shadow%20Daggers&type=weapon class="Text1"><label class="shadow" style="width:30px;height:30px;position:absolute;left:5px;top:390px;cursor:pointer;"></label>Shadow Daggers</a> <a href=/?search=Huntsman%20Knife&type=weapon class="Text1"><label class="huntsman" style="width:30px;height:30px;position:absolute;left:5px;top:444px;cursor:pointer;"></label>Huntsman Knife</a> <a href=/?search=Bowie%20Knife&type=weapon class="Text1"><label class="bowie" style="width:30px;height:30px;position:absolute;left:5px;top:498.5px;cursor:pointer;"></label>Bowie Knife</a> </div> </div> </li>正如您在<label>元素#down-nav-1上看到的那样，它具有链接到函数Dropdown1() onclick属性，并且菜单Display为None和时间。
这是Javascript中的函数本身：
function Dropdown1() { document.getElementById("dropdown-menu-1").style.display = "inline-block"; document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray;background-color: gray;border-radius: 10px;"; }所有这些都可以正常工作，请看小提琴 。 （只有“刀具”按钮才能工作）。
但后来我尝试添加一个功能，所以当用户点击菜单外，显示器将再次设置为“无”：
function Dropdown1() { document.getElementById("dropdown-menu-1").style.display = "inline-block"; document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray;background-color: gray;border-radius: 10px;"; } $(document).click(function(event) { if(!$(event.target).closest('#dropdown-menu-1').length) { if ( ($('#dropdown-menu-1').style.display = "None" ) { $('#dropdown-menu-1').style.display = "inline-block"; } } })添加此代码后，单击按钮时将无法执行任何操作。 （ 见结果 ）。
我不明白那里的具体问题，但请注意，我是Javascript的新手，并且不知道那里有很多东西。
问题是什么？ 我可以用纯Javascript做这个，还是应该在这种情况下使用jquery？
I am currently creating multiple navigation buttons for my website, each of them would show up menus.
So as example, this is the first menu:
<div class="outer-bar"> <ul class="down-bar" style="list-style:hidden"> <li> <label id="down-nav-1" class="down-nav" onclick="Dropdown1()">Knives <b class="caret_down">▼</b></label> <div class="mainsizer"> <div class="dropdown-menus" id="dropdown-menu-1"> <a href=/?search=M9%20Bayonet&type=weapon class="Text1"><label class="m9_bayonet" style="width:30px;height:30px;position:absolute;top:5px;left:5px;cursor:pointer;"></label>M9 Bayonet</a> <a href=/?search=Karambit&type=weapon class="Text1"><label class="karambit" style="width:30px;height:30px;position:absolute;left:5px;top:59px;cursor:pointer;"></label>Karambit</a> <a href=/?search=Bayonet&type=weapon class="Text1"><label class="bayonet" style="width:30px;height:30px;position:absolute;left:5px;top:116px;cursor:pointer;"></label>Bayonet</a> <a href=/?search=Butterfly%20Knife&type=weapon class="Text1"><label class="butterfly" style="width:30px;height:30px;position:absolute;left:5px;top:170px;cursor:pointer;"></label>Butterfly Knife</a> <a href=/?search=Flip%20Knife&type=weapon class="Text1"><label class="flip" style="width:30px;height:30px;position:absolute;left:5px;top:225px;cursor:pointer;"></label>Flip Knife</a> <a href=/?search=Falchion%20Knife&type=weapon class="Text1"><label class="falchion" style="width:30px;height:30px;position:absolute;left:5px;top:280px;cursor:pointer;"></label>Falchion Knife</a> <a href=/?search=Gut%20Knife&type=weapon class="Text1"><label class="gut" style="width:30px;height:30px;position:absolute;left:5px;top:334.5px;cursor:pointer;"></label>Gut Knife</a> <a href=/?search=Shadow%20Daggers&type=weapon class="Text1"><label class="shadow" style="width:30px;height:30px;position:absolute;left:5px;top:390px;cursor:pointer;"></label>Shadow Daggers</a> <a href=/?search=Huntsman%20Knife&type=weapon class="Text1"><label class="huntsman" style="width:30px;height:30px;position:absolute;left:5px;top:444px;cursor:pointer;"></label>Huntsman Knife</a> <a href=/?search=Bowie%20Knife&type=weapon class="Text1"><label class="bowie" style="width:30px;height:30px;position:absolute;left:5px;top:498.5px;cursor:pointer;"></label>Bowie Knife</a> </div> </div> </li>So as you see on the <label> element #down-nav-1, it has onclick attribute linked to the function Dropdown1() and Display of menu is None and the time.
And this is the function itself in Javascript:
function Dropdown1() { document.getElementById("dropdown-menu-1").style.display = "inline-block"; document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray;background-color: gray;border-radius: 10px;"; }All of this would simply work fine, please see Fiddle. (Only "Knives" button works atm).
But then i tried to add a function, so when user clicks outside of the menu, the display would be set to 'None' again:
function Dropdown1() { document.getElementById("dropdown-menu-1").style.display = "inline-block"; document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray;background-color: gray;border-radius: 10px;"; } $(document).click(function(event) { if(!$(event.target).closest('#dropdown-menu-1').length) { if ( ($('#dropdown-menu-1').style.display = "None" ) { $('#dropdown-menu-1').style.display = "inline-block"; } } })And after adding this code, there would be no action when clicking the button. ( see the result ).
I don't understand the specific problem in there, but please note, i am new to Javascript, and don't know many things in there.
What could the problem be? can i do this with pure Javascript or should i use jquery in this case?
最满意答案
代码中存在语法和逻辑错误。
更新了您的代码：
function Dropdown1() { if ($('#dropdown-menu-1').css("display") !== "none") { $('#dropdown-menu-1').css("display", "none"); } else { $('#dropdown-menu-1').css("display", "inline-block"); } document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray; background-color: gray; border-radius: 10px;"; } $(document).click(function(event) { if (!$(event.target).closest('.outer-bar').length) { if ($('#dropdown-menu-1').css("display") !== "none") { $('#dropdown-menu-1').css("display", "none"); } } });在if块内部进行比较时，请使用==或===而不是=运算符。
if块表达式中也未关闭括号。
另外， style.display是与JavaScript对象关联的属性，而不是jQuery对象。 您应该使用.css("display")作为jQuery对象。
更新了工作小提琴： https ： //jsfiddle.net/nashcheez/bjfz7twq/7/
There is syntax & logical error in the code.
Updated your code:
function Dropdown1() { if ($('#dropdown-menu-1').css("display") !== "none") { $('#dropdown-menu-1').css("display", "none"); } else { $('#dropdown-menu-1').css("display", "inline-block"); } document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray; background-color: gray; border-radius: 10px;"; } $(document).click(function(event) { if (!$(event.target).closest('.outer-bar').length) { if ($('#dropdown-menu-1').css("display") !== "none") { $('#dropdown-menu-1').css("display", "none"); } } });Please use == or === instead of the = operator when comparing inside your if blocks.
Also brackets were not closed in the if block expressions.
Also, style.display is a property associated to a JavaScript object and not a jQuery object. You should use .css("display") for a jQuery object.
Updated working fiddle: https://jsfiddle.net/nashcheez/bjfz7twq/7/
发布评论