帶有函式呼叫的JavaScriptIf和else陳述句未產生預期結果

我有一個包含四個串列項的移動選單。當您單擊“功能”串列項時，應該在其下方填充另一個無序串列，當您再次單擊它時，它應該關閉它。

這是我的問題：

在 addEventListener 函式中，我在 if 和 else 陳述句中呼叫了另外兩個函式 (displayType和)。displayTypeCheck當我這樣做并單擊“功能”串列項時，它會打開但當我再次單擊它時不會關閉。

如果我不使用 if 和 else 陳述句中的displayTypeanddisplayTypeCheck函式并單擊“功能”串列項，則 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>

uj5u.com熱心網友回復：

你忘了return宣告。

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

否則，該函式將始終回傳undefined一個虛假值。

uj5u.com熱心網友回復：

在displayTypeCheck函式中，您不會回傳條件的布爾結果。

沒有return宣告，它正在回傳void

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

標籤：javascript 功能 if 语句 事件 菜单

上一篇：在“if”中初始化的區域變數在C#中的“if”之后仍然可用

下一篇：如何修復我的抓鉤腳本錯誤