Javascript 使用文档单击功能事件后未显示菜单

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

例如，这是第一个菜单：

<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>

所有这些都可以正常工作，请参阅。（只有“刀”按钮在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";
        }
    }
})

添加此代码后，单击按钮时将不会执行任何操作。（）

---

我不了解其中的具体问题，但请注意，我对Javascript是新手，对其中的很多东西都不了解

---

有什么问题吗？我可以用纯Javascript来实现这一点，还是应该在这种情况下使用jquery？

如果您使用的是jquery，请始终如一地使用它。不要混合使用jQuery和香草JavaScript。要完成这样一个非常简单的下拉列表，只需使用JavaScript来仅更改类，而不是原始效果。所有其他的都应该由CSS处理

从技术上讲，仅使用HTML和CSS就可以实现这一点。外面有1000多个例子。此外，您还应该使用事件处理程序，而不是单个下拉列表的函数，因为这样更有利于可伸缩性

首先，在CSS中更改以下内容：

.mainsizer.open .dropdown-menus {
  display: block;
}

在JavaScript中，执行以下操作：

$(function () {
  $("label").click(function () {
    if ($(this).next(".mainsizer").hasClass("open"))
      $(this).next(".mainsizer").toggleClass("open");
    else {
      $(".open").removeClass("open");
      $(this).next(".mainsizer").addClass("open");
    }
  });
});

最终，您应该拥有以下代码：

$（函数（）{
$（“标签”）。单击（函数（）{
if（$（this）.next（“.mainsizer”）.hasClass（“打开”））
$（this.next（“.mainsizer”）.toggleClass（“打开”）；
否则{
$（“.open”）.removeClass（“open”）；
$（this.next（“.mainsizer”）.addClass（“open”）；
}
});
});
。外部栏{
位置：相对位置；
显示：块；
z指数：1；
文本对齐：居中；
顶部：55px；
背景色：黑色；
高度：60px；
宽度：100%；
}
.下杆{
列表样式类型：无；
字体大小：105%；
}
.下杆李{
显示：内联块；
边缘顶部：15px；
保证金权利：2%；
垂直对齐：顶部；
}
.向下导航{
z指数：1
字体大小：105%；
颜色：白色；
字体系列：“Lato”；
光标：指针；
过渡：所有0.1秒轻松；
-moz转换：所有0.1秒的易用性；
}
.向下导航：悬停{
颜色：白色；
边框：实心3倍灰色；
背景颜色：灰色；
边界半径：10px；
字体系列：“Lato”；
}
李海军{
显示：内联块；
}
.插入符号向下{
字体大小：30%；
}
梅因西泽先生{
位置：绝对位置；
宽度：164px；
}
.下拉菜单{
显示：无；
位置：绝对位置；
宽度：164px；
右：5%；
背景色：黑色；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：99；
过渡：0.1s缓进；
边缘顶部：5px；
}
.下拉菜单a{
颜色：白色；
文本对齐：居中；
字号：0.9em；
填充：8%0px 15%0%；
右：10%；
文字装饰：无；
显示：块；
列表样式类型：无；
空白：nowrap；
左边缘：0%；
文本缩进：4%；
字体系列：“Lato”；
}
.下拉菜单a：悬停{
背景颜色：灰色；
}
.mainsizer.open.下拉菜单{
显示：块；
}



刀具▼；


手枪▼；


SMGs&9660；


步枪▼；


狙击手▼；


重型▼；


其他▼；


如果您正在使用jQuery，请始终如一地使用它。不要混合使用jQuery和香草JavaScript。要完成这样一个非常简单的下拉列表，只需使用JavaScript来仅更改类，而不是原始效果。所有其他的都应该由CSS处理

从技术上讲，仅使用HTML和CSS就可以实现这一点。外面有1000多个例子。此外，您还应该使用事件处理程序，而不是单个下拉列表的函数，因为这样更有利于可伸缩性

首先，在CSS中更改以下内容：

.mainsizer.open .dropdown-menus {
  display: block;
}

在JavaScript中，执行以下操作：

$(function () {
  $("label").click(function () {
    if ($(this).next(".mainsizer").hasClass("open"))
      $(this).next(".mainsizer").toggleClass("open");
    else {
      $(".open").removeClass("open");
      $(this).next(".mainsizer").addClass("open");
    }
  });
});

最终，您应该拥有以下代码：


$（函数（）{
$（“标签”）。单击（函数（）{
if（$（this）.next（“.mainsizer”）.hasClass（“打开”））
$（this.next（“.mainsizer”）.toggleClass（“打开”）；
否则{
$（“.open”）.removeClass（“open”）；
$（this.next（“.mainsizer”）.addClass（“open”）；
}
});
});
。外部栏{
位置：相对位置；
显示：块；
z指数：1；
文本对齐：居中；
顶部：55px；
背景色：黑色；
高度：60px；
宽度：100%；
}
.下杆{
列表样式类型：无；
字体大小：105%；
}
.下杆李{
显示：内联块；
边缘顶部：15px；
保证金权利：2%；
垂直对齐：顶部；
}
.向下导航{
z指数：1
字体大小：105%；
颜色：白色；
字体系列：“Lato”；
光标：指针；
过渡：所有0.1秒轻松；
-moz转换：所有0.1秒的易用性；
}
.向下导航：悬停{
颜色：白色；
边框：实心3倍灰色；
背景颜色：灰色；
边界半径：10px；
字体系列：“Lato”；
}
李海军{
显示：内联块；
}
.插入符号向下{
字体大小：30%；
}
梅因西泽先生{
位置：绝对位置；
宽度：164px；
}
.下拉菜单{
显示：无；
位置：绝对位置