為什么我的Accordion關閉影片沒有啟動？它打開（有影片），但關閉時沒有影片 -有解無憂

這里有一個Fiddle的問題（點擊 "Werknemers "或 "Verzuimdossiers "旁邊的圖片）。

我有一個側邊欄，其中有些專案有子內容，有些沒有。所以我做了一個帶有子導航專案的手風琴。問題是，開場影片運行良好。然而，關閉影片卻沒有被觸發。

什么會是這里的問題呢？

代碼供參考

。

openSubnav = (evt, subNavName) =>  {
  let i, subnavContent, subnavLinks;

  //Check if the current accordion is clicked again to close it. 
  const subNav = document.getElementById(subNavName)
  if (getComputedStyle(subNav).display =='block) {
    subNav.style.display = 'none'>.
    evt.currentTarget.className = evt.currentTarget。 className.replace(" subnav-isActive", " ")。
    subNav.style.maxHeight = null;
    return。
  }
  /hide alle subnav content; return }
  subnavContent = document.getElementsByClassName("subnav-content") 。
  for (i = 0; i < subnavContent.length; i  ) {
    subnavContent[i].style.display = "none"/span>。

  }
  //delete the subnav-isActive class; }
  subnavLinks = document.getElementsByClassName("subnav-item") 。
  for (i = 0; i < subnavLinks.length; i  ) {
    subnavLinks[i].className = subnavLinks[i].className. replace(" subnav-isActive", "") 。
  }
  //顯示內容style.display = "block"/span>;
  /Add the subnav-isActive class.
  evt.currentTarget.className  = " subnav-isActive" ;

  //如果當前該元素上有一個最大高度，請洗掉它。
  if (subNav.style.maxHeight) {
    subNav.style.maxHeight = null;
  }
  subNav.style.maxHeight = subNav.scrollHeight   "px";
}

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

.root {
  display: flex;
  font-family: 'Poppins'/span>, sans-serif;
}

nav {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none;
}

.icon-container {
  width: 60px; 
  height: 50px; 
  display: flex; 
  justify-content: center; 
  align-items: center;
}

/* .sidebar:hover {
  width: 250px;
  overflow: visible;
} */

.sidebar {
  width: 250px;
}

.sidebar {
  background-color: #8dc4d9;
  position: absolute;
  top:0;
  bottom:0;
  height:100%。
  left:0;
  /* width:60px; */.
  overflow: hidden;
  -webkit-transition:width .05s linear;
  transition:width .05s linear;
}

.sidebar>ul {
  margin: 10px 0;
}

.sidebar li {
  width: 250px;
}

.sidebar li>span{
  position: relative;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  字體大小: 14px;
  transition: all .1s linear;
}

.sidebar .nav-text {
  display: table-cell;
  vertical-align: middle;
  /* 250px breed totaal - 60px breed icoon = 190 */。
  width: 190px;
}

.sidebar .nav-dropdown {
  display: table-cell;
  vertical-align: middle;
  cursor: pointer;
  padding-right: 20px;
  padding-top: 8px;
}

.sidebar .nav-dropdown img {
  transform: rotate(270deg)。
  transition: transform .3s ease;
}

.sidebar .nav-dropdown.subnav-isActive img{
  transform: rotate(360deg)。
}

.user {
  margin-bottom: 20px;
}

.sidebar li:hover>span{
  background-color:#76abbf。
}

.subnav-content {
  display: none;
  /* 17px omdat de afbeelding 24x24 is and de breedte van de sidebar 60px. 
     如果你想獲得更多的資訊，你可以把這些資訊放在其他的位置上。*/
  padding: 10px 17px;
  background-color:#76abbf;
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s easy-out;
}

.content {
  width: calc(50% - 30px) 。
  background-color: #f3f6f9;
}

.preview {
  width: calc(50% - 30px) 。
  background-color: #f3f6f9;
}

<!DOCTYPE html>
<html lang="en"> 

<head>/span>
  <meta charset="UTF-8">/span>
  < meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
  <link rel="styleheet" href="style。 css">
  <script src="script. js"></script>>
  <title>Sidebar</title> 
  <link rel="preconnect"/span> href="https://fonts. googleapis.com">
  <link rel="preconnect"  href="https://fonts. gstatic.com"crossorigin>
  <link href="https://fonts.googleapis. com/css2?family=Poppins:wght@400;700&display=swap" rel="styleheet"> 
</head> 

<body> 
  <div class="root"> 
    <nav class="sidebar"> 
      <ul>/span>
        <li class="user">/span>
          <span>/span>
            <div class="icon-container"> 
              <img class="nav-icon" src=" 。 /icons24/user32.png" alt=">
            </div>/span>
            <span class="nav-text">/span>
              我的賬戶
            </span>我的帳戶
          </span>/span>
        </li>/span>
        <li>/span>
          <span> 
            <div class="icon-container"> 
              <img class="nav-icon" src=" 。 /icons24/bureaublad24.png" alt=">
            </div>/span>
            <span class="nav-text">/span>
              儀表板
            </span>儀表盤
          </span>/span>
        </li>/span>
        <li class="has-subnav"> 
          <span>/span>
            <div class="icon-container"> 
              <img class="nav-icon" src=" 。 /icons24/werknemers24.png" alt=">
            </div>/span>
            <span class="nav-text"> 
              勞工部
            </span> Werknemers
            < span class="nav-dropdown subnav-item" onclick="openSubnav（event, 'Werknemers')">。 
              <img src="./icons24/DropdownArrow16.png"/span>>
            </span>/span>
          </span>/span>
          < ul id="Werknemers" class="subnav-content"> 
            <li>/span>kaas</li>/span>
            <li>/span>brood</li>/span>
            <li>eieren</li>/span>
          </ul>/span>
        </li>/span>
        <li>/span>
          <span> 
            <div class="icon-container"> 
              <img class="nav-icon" src=" 。 /icons24/verzuimdossiers24.png" alt=">
            </div>/span>
            <span class="nav-text">/span>
              檔案資料
            </span> Verzuimdossiers
            < span class="nav-dropdown subnav-item" onclick="openSubnav（event, 'Verzuimdossiers')">。 
              <img src="./icons24/DropdownArrow16.png"/span>>
            </span>/span>
          </span>/span>
          < ul id="Verzuimdossiers" class="subnav-content">
            <li>boter</li> 
            <li>friet</li>/span>
            <li>/span>pasta</li>/span>
          </ul>/span>
        </li>/span>
        <li>/span>
          <span> 
            <div class="icon-container"> 
              <img class="nav-icon" src=" 。 /icons24/trajecten24.png" alt=">
            </div>/span>
            <span class="nav-text"> 
              軌跡
            </span>
          </span>/span>
        </li>/span>
        <li>/span>
          <span> 
            <div class="icon-container"> 
              <img class="nav-icon" src=" 。 /icons24/projecten24.png" alt=">
            </div>/span>
            <span class="nav-text">/span>
              專案
            </span>/span>
          </span>/span>
        </li>/span>
      </ul>/span>
    </nav>/span>
    <div class="content"/span>>
      內容
    </div>內容
    <div class="preview"> 
      預覽
    </div>預覽
  </div>/span>
</body> 

</html>/span>

uj5u.com熱心網友回復：

你需要在display: none之前設定超時，這樣它就有時間來執行關閉影片。

就像在這個代碼中：

 const subNav = document.getElementById(subNavName)
  if (getComputedStyle(subNav).display =='block) {
    evt.currentTarget.className = evt.currentTarget。 className.replace(" subnav-isActive", " ")。
    subNav.style.maxHeight = null;
    setTimeout(function(){subNav. style.display = 'none';}, 100）。)
    回傳。
  }

。

openSubnav = (evt, subNavName) =>  {
  let i, subnavContent, subnavLinks;

  //Check if the current accordion is clicked again to close it. 
  const subNav = document.getElementById(subNavName)
  if (getComputedStyle(subNav).display =='block) {
    evt.currentTarget.className = evt.currentTarget。 className.replace(" subnav-isActive", " ")。
    subNav.style.maxHeight = null;
    setTimeout(function(){subNav. style.display = 'none';}, 100）。)
    回傳。
  }
  /hide alle subnav content; return }
  subnavContent = document.getElementsByClassName("subnav-content") 。
  for (i = 0; i < subnavContent.length; i  ) {
    subnavContent[i].style.display = "none"/span>。

  }
  //delete the subnav-isActive class; }
  subnavLinks = document.getElementsByClassName("subnav-item") 。
  for (i = 0; i < subnavLinks.length; i  ) {
    subnavLinks[i].className = subnavLinks[i].className. replace(" subnav-isActive", "") 。
  }
  //顯示內容style.display = "block"/span>;
  /Add the subnav-isActive class.
  evt.currentTarget.className  = " subnav-isActive" ;

  //如果當前該元素上有一個最大高度，請洗掉它。
  if (subNav.style.maxHeight) {
    subNav.style.maxHeight = null;
  }
  subNav.style.maxHeight = subNav.scrollHeight   "px";
}

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

.root {
  display: flex;
  font-family: 'Poppins'/span>, sans-serif;
}

nav {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none;
}

.icon-container {
  width: 60px; 
  height: 50px; 
  display: flex; 
  justify-content: center; 
  align-items: center;
}

/* .sidebar:hover {
  width: 250px;
  overflow: visible;
} */

.sidebar {
  width: 250px;
}

.sidebar {
  background-color: #8dc4d9;
  position: absolute;
  top:0;
  bottom:0;
  height:100%。
  left:0;
  /* width:60px; */.
  overflow: hidden;
  -webkit-transition:width .05s linear;
  transition:width .05s linear;
}

.sidebar>ul {
  margin: 10px 0;
}

.sidebar li {
  width: 250px;
}

.sidebar li>span{
  position: relative;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  字體大小: 14px;
  transition: all .1s linear;
}

.sidebar .nav-text {
  display: table-cell;
  vertical-align: middle;
  /* 250px breed totaal - 60px breed icoon = 190 */。
  width: 190px;
}

.sidebar .nav-dropdown {
  display: table-cell;
  vertical-align: middle;
  cursor: pointer;
  padding-right: 20px;
  padding-top: 8px;
}

.sidebar .nav-dropdown img {
  transform: rotate(270deg)。
  transition: transform .3s ease;
}

.sidebar .nav-dropdown.subnav-isActive img{
  transform: rotate(360deg)。
}

.user {
  margin-bottom: 20px;
}

.sidebar li:hover>span{
  background-color:#76abbf。
}

.subnav-content {
  display: none;
  /* 17px omdat de afbeelding 24x24 is and de breedte van de sidebar 60px. 
     如果你想獲得更多的資訊，你可以把這些資訊放在其他的位置上。*/
  padding: 10px 17px;
  background-color:#76abbf;
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s easy-out;
}

.content {
  width: calc(50% - 30px) 。
  background-color: #f3f6f9;
}

.preview {
  width: calc(50% - 30px) 。
  background-color: #f3f6f9;
}

<!DOCTYPE html>
<html lang="en"> 

<head>/span>
  <meta charset="UTF-8">/span>
  < meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
  <link rel="styleheet" href="style。 css">
  <script src="script. js"></script>>
  <title>Sidebar</title> 
  <link rel="preconnect"/span> href="https://fonts. googleapis.com">
  <link rel="preconnect"  href="https://fonts. gstatic.com"crossorigin>
  <link href="https://fonts.googleapis. com/css2?family=Poppins:wght@400;700&display=swap" rel="styleheet"> 
</head> 

<body> 
  <div class="root"> 
    <nav class="sidebar"> 
      <ul>/span>
        <li class="user">/span>
          <span>/span>
            <div class="icon-container"> 
              <img class="nav-icon" src=" 。 /icons24/user32.png" alt=">
            </div>/span>
            <span class="nav-text">/span>
              我的賬戶
            </span>我的帳戶
          </span>/span>
        </li>/span>
        <li>/span>
          <span> 
            <div class="icon-container"> 
              <img class="nav-icon" src=" 。 /icons24/bureaublad24.png" alt=">
            </div>/span>
            <span class="nav-text">/span>
              儀表板
            </span>儀表盤
          </span>/span>
        </li>/span>
        <li class="has-subnav"> 
          <span>/span>
            <div class="icon-container"> 
              <img class="nav-icon" src=" 。 /icons24/werknemers24.png" alt=">
            </div>/span>
            <span class="nav-text"> 
              勞工部
            </span> Werknemers
            < span class="nav-dropdown subnav-item" onclick="openSubnav（event, 'Werknemers')">。 
              <img src="./icons24/DropdownArrow16.png"/span>>
            </span>/span>
          </span>/span>
          < ul id="Werknemers" class="subnav-content"> 
            <li>/span>kaas</li>/span>
            <li>/span>brood</li>/span>
            <li>eieren</li>/span>
          </ul>/span>
        </li>/span>
        <li>/span>
          <span> 
            <div class="icon-container"> 
              <img class="nav-icon" src=" 。 /icons24/verzuimdossiers24.png" alt=">
            </div>/span>
            <span class="nav-text">/span>
              檔案資料
            </span> Verzuimdossiers
            < span class="nav-dropdown subnav-item" onclick="openSubnav（event, 'Verzuimdossiers')">。 
              <img src="./icons24/DropdownArrow16.png"/span>>
            </span>/span>
          </span>/span>
          < ul id="Verzuimdossiers" class="subnav-content">
            <li>boter</li> 
            <li>friet</li>/span>
            <li>/span>pasta</li>/span>
          </ul>/span>
        </li>/span>
        <li>/span>
          <span> 
            <div class="icon-container"> 
              <img class="nav-icon" src=" 。 /icons24/trajecten24.png" alt=">
            </div>/span>
            <span class="nav-text"> 
              軌跡
            </span>
          </span>/span>
        </li>/span>
        <li>/span>
          <span> 
            <div class="icon-container"> 
              <img class="nav-icon" src=" 。 /icons24/projecten24.png" alt=">
            </div>/span>
            <span class="nav-text">/span>
              專案
            </span>/span>
          </span>/span>
        </li>/span>
      </ul>/span>
    </nav>/span>
    <div class="content"/span>>
      內容
    </div>內容
    <div class="preview"> 
      預覽
    </div>預覽
  </div>/span>
</body> 

</html>/span>

uj5u.com熱心網友回復：

原因是你的影片需要一些時間來執行，但你在你的影片有任何機會被渲染之前就指定了display: none。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/319405.html

標籤：

上一篇：用css創建線條加載影片

下一篇：Tomcat在一定數量的字符后為請求正文添加換行符？