1
我目前正在爲我的網站創建多個導航按鈕，它們中的每一個都會顯示菜單。使用文檔點擊功能事件後菜單不顯示
因此，作爲例子，這是第一個菜單：
<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>元素＃下調NAV-1，它已經onclick屬性鏈接到功能Dropdown1()和菜單的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;";
}
所有這一切只會工作精細，請參閱Fiddle。 （只有「刀」按鈕工程atm）。
但後來我嘗試添加功能，所以當用戶點擊菜單之外，顯示器將被設置爲「無」再次：
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";
}
}
})
並添加該代碼後，就沒有點擊按鈕時的動作。 （see the result）。
我不明白在那裏的具體問題，但請注意，我是新來的Javascript，並不知道那裏有很多東西。
問題是什麼？我可以用純Javascript來做到這一點，或者我應該在這種情況下使用jquery嗎？
或者只編寫這該死的東西正常，而僅使用HTML和CSS？ JS不需要這麼簡單的事情。 – junkfoodjunkie
@junkfoodjunkie我在過去使用過複選框輸入，但顯然僞元素不能與三叉戟佈局引擎一起使用。 （ IE瀏覽器 ）。 – ShellRox
呃，現在呢？你需要支持多久？ – junkfoodjunkie