Question

我正在尝试制作一个学习javascript的主页。

我在制作下拉菜单时遇到问题。我使用classList.toggle("show")使#dropDownContent元素的类具有show。我使用了chrome开发人员工具并检查#dropDownContent的类更改。但它没有改变。

这是我的代码。我应该在哪里改变？

function mypageMenuDropDown() {
  var dropdownContent = document.getElementById('dropDownContent');
  dropdownContent.classList.toggle("show");
}

<header>
  <nav>
    <ul id="header">
      <li id="logo"><a class="headerDiv" href='.'>FLAGTAG</a></li>
      <div id="menu">
        <li id="login"><a class="headerDiv" href="model/logout.php">LOGOUT</a></li>
        <li id="mypage"><button class="headerDiv" onclick="mypageMenuDropDown()">MYPAGE</a></li>
          <div id="dropDownContent" class="dropDownContent">
            <a class="headerDiv" href="?menu=join">CALANDER</a>
            <a class="headerDiv" href="?menu=routine">ROUTINE</a>
            <a class="headerDiv" href="?menu=DIET">DIET</a>
          </div>
      </div>
    </ul>
  </nav>
</header>

Answer 1

有东西

有一个不平衡的button标签和一个a标签。删除</a>
第二个默认情况下，您可以hide或show下拉菜单。在这种情况下，默认情况下它是隐藏的，在单击时它是在切换类

function mypageMenuDropDown() {
  var dropdownContent = document.getElementById('dropDownContent');
  dropdownContent.classList.toggle("hide");
}

.hide {
  display: none;
}

<header>
  <nav>
    <ul id="header">
      <li id="logo"><a class="headerDiv" href='.'>FLAGTAG</a></li>
      <div id="menu">
        <li id="login"><a class="headerDiv" href="model/logout.php">LOGOUT</a></li>
        <li id="mypage"><button class="headerDiv" onclick="mypageMenuDropDown()">MYPAGE</button></li>
        <div id="dropDownContent" class="dropDownContent hide">
          <a class="headerDiv" href="?menu=join">CALANDER</a>
          <a class="headerDiv" href="?menu=routine">ROUTINE</a>
          <a class="headerDiv" href="?menu=DIET">DIET</a>
        </div>
      </div>
    </ul>
  </nav>
</header>

Answer 2

此答案基于以下假设：问题是由CSS特异性引起的。

以下是可能引起问题的示例：

function mypageMenuDropDown() {
  var dropdownContent = document.getElementById('dropDownContent');
  dropdownContent.classList.toggle("show");
}

#dropDownContent {
  display: none;
}

.show {
  display: block;
}

<header>
  <nav>
    <ul id="header">
      <li id="logo"><a class="headerDiv" href='.'>FLAGTAG</a></li>
      <div id="menu">
        <li id="login"><a class="headerDiv" href="model/logout.php">LOGOUT</a></li>
        <li id="mypage"><button class="headerDiv" onclick="mypageMenuDropDown()">MYPAGE</a></li>
          <div id="dropDownContent" class="dropDownContent">
            <a class="headerDiv" href="?menu=join">CALANDER</a>
            <a class="headerDiv" href="?menu=routine">ROUTINE</a>
            <a class="headerDiv" href="?menu=DIET">DIET</a>
          </div>
      </div>
    </ul>
  </nav>
</header>

您可以将选择器更改为更具体，以使其比默认样式具有更高的优先级

function mypageMenuDropDown() {
  var dropdownContent = document.getElementById('dropDownContent');
  dropdownContent.classList.toggle("show");
}

#dropDownContent {
  display: none;
}

#dropDownContent.show {
  display: block;
}

<header>
  <nav>
    <ul id="header">
      <li id="logo"><a class="headerDiv" href='.'>FLAGTAG</a></li>
      <div id="menu">
        <li id="login"><a class="headerDiv" href="model/logout.php">LOGOUT</a></li>
        <li id="mypage"><button class="headerDiv" onclick="mypageMenuDropDown()">MYPAGE</a></li>
          <div id="dropDownContent" class="dropDownContent">
            <a class="headerDiv" href="?menu=join">CALANDER</a>
            <a class="headerDiv" href="?menu=routine">ROUTINE</a>
            <a class="headerDiv" href="?menu=DIET">DIET</a>
          </div>
      </div>
    </ul>
  </nav>
</header>

Answer 3

function mypageMenuDropDown() {
 var dropDownContent = document.getElementById("dropDownContent").classList;
 
 
 if (dropDownContent.contains("show")) {
 
    dropDownContent.remove("show");
 
 } else {
 
    dropDownContent.add("show");
 
 }
 

  }

.dropDownContent{ display:none;}
.show{ display:block;}

<header>
  <nav>
    <ul id="header">
      <li id="logo"><a class="headerDiv" href='.'>FLAGTAG</a></li>
      <div id="menu">
        <li id="login"><a class="headerDiv" href="model/logout.php">LOGOUT</a></li>
        <li id="mypage"><button class="headerDiv" onclick="mypageMenuDropDown()">MYPAGE</a></li>
          <div id="dropDownContent" class="dropDownContent">
            <a class="headerDiv" href="?menu=join">CALANDER</a>
            <a class="headerDiv" href="?menu=routine">ROUTINE</a>
            <a class="headerDiv" href="?menu=DIET">DIET</a>
          </div>
      </div>
    </ul>
  </nav>
</header>

javascript切换不会插入类名

3 个答案: