javascript - 使用文档点击功能事件后菜单不显示

Question

我目前正在为我的网站创建多个导航按钮，每个按钮都会显示菜单。

例如，这是第一个菜单:

<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">&#9660;</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，它有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";
        }
    }
})

并且添加这段代码后，点击按钮时不会有任何 Action 。 (see the result)。

---

我不明白那里的具体问题，但请注意，我是 Javascript 的新手，不知道那里有很多东西。

可能是什么问题？我可以使用纯 Javascript 执行此操作还是应该在这种情况下使用 jquery？

Answer 1

代码中存在语法和逻辑错误。

更新了您的代码:

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 block 中进行比较时，请使用 == 或 === 而不是 = 运算符.

if block 表达式中的括号也没有闭合。

此外，style.display 是与 JavaScript 对象关联的属性，而不是 jQuery 对象。对于 jQuery 对象，您应该使用 .css("display")。

更新的工作 fiddle :https://jsfiddle.net/nashcheez/bjfz7twq/7/