JavaScript If 和 else 语句 w/function 调用未产生预期结果

Question

我有一个包含四个列表项的移动菜单。当您单击“功能”列表项时，应该会在其下方填充另一个无序列表，当您再次单击它时，它应该会关闭它。

这是我的问题：

在 addEventListener 函数中，我在 if 和 else 语句中调用了另外两个函数（displayType 和 displayTypeCheck）。当我这样做并单击“功能”列表项时，它会打开，但当我再次单击它时 不会关闭 。

如果我不在if和else语句中使用displayType和displayTypeCheck函数并点击“功能”列表项， UL 将打开和关闭。

为什么调用其他两个函数的 if 和 else 语句不起作用，我该如何让它起作用？

在下面提供的 Javascript 代码中，被注释掉的 if 和 else 语句有效，而没有被注释掉的块是不完全有效的代码。

const menuIcon = document.querySelector(".mobile-menu-icon");
const mobileMenu = document.querySelector(".mobile-menu");
const closeMenuIcon = document.querySelector(".close-menu-icon");
const featuresMobile = document.querySelector(".features-mobile");
const featuresMobileDropdown = document.querySelector(".features-mobile-dropdown");
const overlay = document.querySelector(".overlay");


function displayType(element, displayValue) {
  element.style.display = displayValue;
}

function displayTypeCheck(element, displayValue) {
  element.style.display === displayValue;
}



menuIcon.addEventListener("click", function () {
  displayType(mobileMenu, 'block');
  displayType(overlay, 'block');
});

closeMenuIcon.addEventListener("click", function () {
  displayType(mobileMenu, 'none');
  displayType(overlay, 'none');
});



featuresMobile.addEventListener("click", function () {
    //   if (featuresMobileDropdown.style.display === "block") {
    //   featuresMobileDropdown.style.display = "none";
    // } else {
    //   featuresMobileDropdown.style.display = "block";
    // }

  if (displayTypeCheck(featuresMobileDropdown, "block")) {
    displayType(featuresMobileDropdown, "none");
  } else {
    displayType(featuresMobileDropdown, "block");
  }
});

@import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&display=swap");

:root {
  --almostWhite: hsl(0, 0%, 98%);
  --mediumGray: hsl(0, 0%, 41%);
  --almostBlack: hsl(0, 0%, 8%);
  --navDropDownColor: #e9ecef;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

body {
  min-height: 100vh;
  font-family: "Epilogue", sans-serif;
  background-color: var(--almostWhite);
}

header {
  padding: .9375rem 2.5rem .9375rem 2.5rem;
  max-width: 100rem;
  margin: auto;
}

header nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

header nav ul li {
  cursor: pointer;
}


.register {
  border: .125rem solid var(--mediumGray);
  padding: .625rem .9375rem;
  border-radius: .8125rem;
}

.mobile-menu-icon {
  height: 3.125rem;
}


  .mobile-menu-icon {
    display: block;
    cursor: pointer;
  }

  .mobile-menu .mobile-nav-links {
    margin-top: 4.375em;
    padding-left: .9375em;
    color: var(--mediumGray);
  }

  .mobile-menu ul li {
    padding: .625em;
  }

  .mobile-menu .mobile-nav-links li ul {
    margin-left: .625em;
    margin-top: .625em;
    display: none;
  }

  .mobile-menu {
    background-color: white;
    width: 18.75em;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: none;
  }

  .close-menu-icon {
    margin-left: auto;
    margin-right: 1.25em;
    margin-top: 1.25em;
    display: block;
    cursor: pointer;
    height: 3.125em;
  }

  .login-register-mobile-container {
    color: var(--mediumGray);
    width: 90%;
    margin: 3.125em auto;
  }

  .login-register-mobile-container span {
    display: block;
    text-align: center;
    cursor: pointer;
  }

  .login-register-mobile-container span:first-child {
    margin-bottom: 1.25em;
  }
  
  
   .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(.1875rem);
    z-index: 1;
    display: none;
  }

<header>
      <nav>
        <img class="mobile-menu-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/2048px-Hamburger_icon.svg.png" alt="" />
        <div class="mobile-menu">
          <img
            class="close-menu-icon"
            src="https://cdn4.iconfinder.com/data/icons/user-interface-131/32/close-512.png"
            alt=""
          />
          <ul class="mobile-nav-links">
            <li class="features-mobile">Features
              <ul class="features-mobile-dropdown">
                <li>Todo List</li>
                <li>Calenders</li>
                <li>Reminders</li>
                <li>Planning</li>
              </ul>
            </li>
            <li class="company-mobile">Company</li>
            <li>Careers</li>
            <li>About</li>
          </ul>
          <div class="login-register-mobile-container">
            <span class="login">Login</span>
            <span class="register">Register</span>
          </div>
        </div>
      </nav>
      <div class="overlay"></div>
    </header>

Answer 1

您忘记了 return 语句。

function displayTypeCheck(element, displayValue) {
  return element.style.display === displayValue;
}

否则该函数将始终 return undefined 这是一个错误的值。

Answer 2

在 displayTypeCheck 函数中，您不会返回条件的布尔结果。

没有 return 语句，它返回 void

function displayTypeCheck(element, displayValue) {
  return element.style.display === displayValue;
}

JavaScript If 和 else 语句 w/function 调用未产生预期结果

JavaScript If and else statement w/function calls not producing expected result

javascript

events

if-statement

menu

function