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

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的菜单是{{ 1}}和时间。

这是Javascript中的函数本身：

None

所有这些只是正常，请参阅Fiddle。 （只有＆＃34; Knives＆＃34;按钮工作atm）。

但是后来我尝试添加一个功能，所以当用户点击菜单外部时，显示屏将被设置为“无”＆＃39;再次：

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;";
}

添加此代码后，单击按钮时将无法执行任何操作。 （see the result）。

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

问题是什么？我可以用纯Javascript做这个，还是应该在这种情况下使用jquery？

Answer 1

如果您使用的是jQuery，请一致地使用它。不要混合使用jQuery和Vanilla 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");
    }
  });
});

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

＆＃13;

＆＃13;

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

＆＃13;

.outer-bar {
  position: relative;
  display: block;
  z-index: 1;
  text-align: center;
  top: 55px;
  background-color: black;
  height: 60px;
  width: 100%;
}
.down-bar {
  list-style-type: none;
  font-size: 105%;
}
.down-bar li {
    display: inline-block;
    margin-top: 15px;
    margin-right: 2%;
    vertical-align: top;
}
.down-nav {
  z-index: 1
  font-size: 105%;
  color: white;
  font-family: 'Lato';
  cursor: pointer;
  transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
}
.down-nav:hover {
  color: white;
  border: solid 3px gray;
  background-color: gray;
  border-radius: 10px;
  font-family: 'Lato';
}
.down-nav li {
  display: inline-block;
}
.caret_down {
  font-size: 30%;
}
.mainsizer {
    position: absolute;
    width: 164px;
}
.dropdown-menus {
  display: none;
  position: absolute;
  width: 164px;
  right: 5%;
  background-color: black;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 99;
  transition: 0.1s ease-in;
  margin-top: 5px;
}
.dropdown-menus a {
  color: white;
  text-align: center;
  font-size: 0.9em;
  padding: 8% 0px 15% 0%;
  padding-right: 10%;
  text-decoration: none;
  display: block;
  list-style-type: none;
  white-space: nowrap;
  margin-left: 0%;
  text-indent: 4%;
  font-family: 'Lato';
}
.dropdown-menus a:hover {
  background-color: gray;
}
.mainsizer.open .dropdown-menus {
  display: block;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<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>
    <li>
      <label id="down-nav-2" class="down-nav">Pistols <b class="caret_down">&#9660;</b></label>
      <div class="mainsizer">
        <div class="dropdown-menus" id="dropdown-menu-2">
          <a href=?search=Glock-18&type=weapon><label class="glock-18" style="width:30px;height:23px;position:absolute;top:9.5px;left:4px;cursor:pointer;"></label>Glock-18</a>
          <a href=?search=USP-S&type=weapon><label class="usp-s" style="width:30px;height:23px;position:absolute;top:59px;left:4px;cursor:pointer;"></label>USP-S</a>
          <a href=?search=P2000&type=weapon><label class="p2k" style="width:30px;height:23px;position:absolute;top:106px;left:4px;cursor:pointer;"></label>P2000</a>
          <a href=?search=Five-Seven&type=weapon><label class="five-seven" style="width:30px;height:23px;position:absolute;top:157px;left:4px;cursor:pointer;"></label>Five-SeveN</a>
          <a href=?search=Desert%20Eagle&type=weapon><label class="desert-eagle" style="width:30px;height:23px;position:absolute;top:207px;left:4px;cursor:pointer;"></label>Desert Eagle</a>
          <a href=?search=Tec-9&type=weapon><label class="tec9" style="width:30px;height:23px;position:absolute;top:258px;left:4px;cursor:pointer;"></label>Tec-9</a>
          <a href=?search=CZ75-Auto&type=weapon><label class="cz75" style="width:30px;height:23px;position:absolute;top:307px;left:4px;cursor:pointer;"></label>CZ75-Auto</a>
          <a href=?search=P250&type=weapon><label class="p250" style="width:30px;height:23px;position:absolute;top:357.5px;left:4px;cursor:pointer;"></label>P250</a>
          <a href=?search=Dual%20Berettas&type=weapon><label class="dual_berettas" style="width:30px;height:30px;position:absolute;top:407px;left:4px;cursor:pointer;"></label>Dual Berettas</a>
          <a href=?search=R8%20Revolver&type=weapon><label class="r8_revolver" style="width:30px;height:23px;position:absolute;top:461.5px;left:4px;cursor:pointer;"></label>R8 Revolver</a>
        </div>
      </div>
    </li>
    <li>
      <label id="down-nav-4" class="down-nav">SMGs <b class="caret_down">&#9660;</b></label>
      <div class="mainsizer">
        <div class="dropdown-menus" id="dropdown-menu-3">
          <a href=?search=P90&type=weapon><label class="p90" style="width:30px;height:23px;position:absolute;top:10px;left:8px;cursor:pointer;"></label>P90</a>
          <a href=?search=MAC-10&type=weapon><label class="mac10" style="width:30px;height:23px;position:absolute;top:61px;left:8px;cursor:pointer;"></label>MAC-10</a>
          <a href=?search=MP7&type=weapon><label class="mp7" style="width:30px;height:23px;position:absolute;top:111px;left:8px;cursor:pointer;"></label>MP7</a>
          <a href=?search=MP9&type=weapon><label class="mp9" style="width:30px;height:23px;position:absolute;top:161px;left:8px;cursor:pointer;"></label>MP9</a>
          <a href=?search=PP-Bizon&type=weapon><label class="pp-bizon" style="width:30px;height:23px;position:absolute;top:210px;left:8px;cursor:pointer;"></label>PP-Bizon</a>
          <a href=?search=UMP-45&type=weapon><label class="ump45" style="width:30px;height:23px;position:absolute;top:261.5px;left:8px;cursor:pointer;"></label>UMP-45</a>
        </div>
      </div>
    </li>
    <li>
      <label id="down-nav-5" class="down-nav">Rifles <b class="caret_down">&#9660;</b></label>
      <div class="mainsizer">
        <div class="dropdown-menus" id="dropdown-menu-4">
          <a href=?search=AK-47&type=weapon><label class="ak47" style="width:30px;height:23px;position:absolute;top:9.5px;left:8px;cursor:pointer;"></label>AK-47</a>
          <a href=?search=Galil%20Ar&type=weapon><label class="galil_ar" style="width:30px;height:23px;position:absolute;top:61px;left:8px;cursor:pointer;"></label>Galil AR</a>
          <a href=?search=SG%20553&type=weapon><label class="sg553" style="width:30px;height:23px;position:absolute;top:111px;left:8px;cursor:pointer;"></label>SG 553</a>
          <a href=?search=M4A4&type=weapon><label class="m4a4" style="width:30px;height:23px;position:absolute;top:161px;left:8px;cursor:pointer;"></label>M4A4</a>
          <a href=?search=M4A1-S&type=weapon><label class="m4a1s" style="width:30px;height:23px;position:absolute;top:211.5px;left:8px;cursor:pointer;"></label>M4A1-S</a>
          <a href=?search=AUG&type=weapon><label class="aug" style="width:30px;height:23px;position:absolute;top:261.5px;left:8px;cursor:pointer;"></label>AUG</a>
          <a href=?search=Famas&type=weapon><label class="famas" style="width:30px;height:23px;position:absolute;top:311.5px;left:8px;cursor:pointer;"></label>Famas</a>
        </div>
      </div>
    </li>
    <li>
      <label id="down-nav-6" class="down-nav">Snipers <b class="caret_down">&#9660;</b></label>
      <div class="mainsizer">
        <div class="dropdown-menus" id="dropdown-menu-5">
          <a href=?search=AWP&type=weapon><label class="awp" style="width:30px;height:23px;position:absolute;top:9.5px;left:13.5px;cursor:pointer;"></label>AWP</a>
          <a href=?search=SSG%2008&type=weapon><label class="ssg08" style="width:30px;height:23px;position:absolute;top:61px;left:13.5px;cursor:pointer;"></label>SSG 08</a>
          <a href=?search=SCAR-20&type=weapon><label class="scar20" style="width:30px;height:23px;position:absolute;top:111px;left:13.5px;cursor:pointer;"></label>SCAR-20</a>
          <a href=?search=G3SG1&type=weapon><label class="g3sg1" style="width:30px;height:23px;position:absolute;top:161px;left:13.5px;cursor:pointer;"></label>G3SG1</a>
        </div>
      </div>
    </li>
    <li>
      <label id="down-nav-6" class="down-nav">Heavy <b class="caret_down">&#9660;</b></label>
      <div class="mainsizer">
        <div class="dropdown-menus" id="dropdown-menu-6">
          <a href=?search=Nova&type=weapon><label class="nova" style="width:30px;height:23px;position:absolute;top:9.5px;left:13.5px;cursor:pointer;"></label>Nova</a>
          <a href=?search=MAG-7&type=weapon><label class="mag-7" style="width:30px;height:23px;position:absolute;top:61px;left:13.5px;cursor:pointer;"></label>MAG-7</a>
          <a href=?search=XM1014&type=weapon><label class="xm1014" style="width:30px;height:23px;position:absolute;top:111px;left:13.5px;cursor:pointer;"></label>XM1014</a>
          <a href=?search=Sawed-Off&type=weapon><label class="sawed_off" style="width:30px;height:23px;position:absolute;top:161px;left:13.5px;cursor:pointer;"></label>Sawed-Off</a>
          <a href=?search=Negev&type=weapon><label class="negev" style="width:30px;height:23px;position:absolute;top:211.5px;left:13.5px;cursor:pointer;"></label>Negev</a>
          <a href=?search=M249&type=weapon><label class="m249" style="width:30px;height:23px;position:absolute;top:261.5px;left:13.5px;cursor:pointer;"></label>M249</a>
        </div>
      </div>
    </li>
    <li>
      <label id="down-nav-7" class="down-nav">Others <b class="caret_down">&#9660;</b></label>
      <div class="mainsizer">
        <div class="dropdown-menus" id="dropdown-menu-7">
          <a href=?search=Keys&type=weapon><label class="keys" style="width:30px;height:30px;position:absolute;top:6px;left:13.5px;cursor:pointer;"></label>Keys</a>
          <a href=?search=Cases&type=weapon><label class="cases" style="width:30px;height:23px;position:absolute;top:61px;left:13.5px;cursor:pointer;"></label>Cases</a>
          <a href=?search=Passes&type=weapon><label class="passes" style="width:30px;height:23px;position:absolute;top:105.5px;left:13.5px;cursor:pointer;"></label>Passes</a>
          <a href=?search=Capsules&type=weapon><label class="capsules" style="width:30px;height:23px;position:absolute;top:156.5px;left:13.5px;cursor:pointer;"></label>Capsules</a>
          <a href=?search=Pins&type=weapon><label class="pins" style="width:30px;height:30px;position:absolute;top:207px;left:13.5px;cursor:pointer;"></label>Pins</a>
          <a href=?search=Packages&type=weapon><label class="packages" style="width:30px;height:14px;position:absolute;top:264.5px;left:13.5px;cursor:pointer;"></label>Packages</a>
          <a href=?search=Stickers&type=weapon><label class="stickers" style="width:30px;height:30px;position:absolute;top:308px;left:13.5px;cursor:pointer;"></label>Stickers</a>
          <a href=?search=Music%20Kits&type=weapon><label class="music_kits" style="width:30px;height:34px;position:absolute;top:356.5px;left:13.5px;cursor:pointer;"></label>Music Kits</a>
        </div>
      </div>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

全屏输出：http://output.jsbin.com/jeropupogu

Answer 2

有语法＆amp;代码中的逻辑错误。

更新了您的代码：

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/

Answer 3

这是一个最小的，有效的（虽然没有完全风格化）版本，不使用JS，非常基本的HTML和CSS。应该可以在任何浏览器中使用。

＆＃13;

＆＃13;

.nav {
  display: block;
  background-color: black;
  height: 5em;
}
.nav a {
  color: white;
  }
.nav ul {
  list-style-type: none;
  }
.nav > ul > li {
  display: inline-block;
  }
.nav ul li > ul {
  display: none;
  }
.nav ul li:hover > ul {
  display: block;
  }
.down-nav {
  font-size: 105%;
  color: white;
  font-family: 'Lato';
  cursor: pointer;
  transition: all 0.1s ease;
  border: solid .2em transparent;
}
.down-nav:hover {
  border: solid .2em gray;
  background-color: gray;
  border-radius: 1em;
  font-family: 'Lato';
}

＆＃13;

<div class="nav">
  <ul>
    <li class="down-nav">Knives <span>&#9660;</span>
       <ul>
        <li><a href="/?search=M9%20Bayonet&type=weapon">M9 Bayonet</a></li>
        <li><a href="/?search=Karambit&type=weapon">Karambit</a></li>
        <li><a href="/?search=Bayonet&type=weapon">Bayonet</a></li>
        <li><a href="/?search=Butterfly%20Knife&type=weapon">Butterfly Knife</a></li>
        <li><a href="/?search=Flip%20Knife&type=weapon">Flip Knife</a></li>
        <li><a href="/?search=Falchion%20Knife&type=weapon">Falchion Knife</a></li>
        <li><a href="/?search=Gut%20Knife&type=weapon">Gut Knife</a></li>
        <li><a href="/?search=Shadow%20Daggers&type=weapon">Shadow Daggers</a></li>
        <li><a href="/?search=Huntsman%20Knife&type=weapon">Huntsman Knife</a></li>
        <li><a href="/?search=Bowie%20Knife&type=weapon">Bowie Knife</a></li>
       </ul>
    </li>
    <li class="down-nav">Pistols <span>&#9660;</span>
        <ul>
          <li><a href="/?search=Glock-18&type=weapon">Glock-18</a></li>
          <li><a href="/?search=USP-S&type=weapon">USP-S</a></li>
          <li><a href="/?search=P2000&type=weapon">P2000</a></li>
          <li><a href="/?search=Five-Seven&type=weapon">Five-SeveN</a></li>
          <li><a href="/?search=Desert%20Eagle&type=weapon">Desert Eagle</a></li>
          <li><a href="/?search=Tec-9&type=weapon">Tec-9</a></li>
          <li><a href="/?search=CZ75-Auto&type=weapon">CZ75-Auto</a></li>
          <li><a href="/?search=P250&type=weapon">P250</a></li>
          <li><a href="/?search=Dual%20Berettas&type=weapon">Dual Berettas</a></li>
          <li><a href="/?search=R8%20Revolver&type=weapon">R8 Revolver</a></li>
        </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;