基于onclick的子菜单扩展和innerHTML替换，只使用Javascript答案

【问题标题】：sub-menu expansion and innerHTML replacement based on onclick, using just Javascript基于onclick的子菜单扩展和innerHTML替换，只使用Javascript
【发布时间】：2018-07-31 12:44:27
【问题描述】：

首先，我应该提一下，我刚接触编码世界大约 4 周，这是我第一次尝试制作（我认为会是）一个简单的网站。

我在 Stack Overflow 上看到过很多类似的问题，但在尝试调整解决方案中提供的代码示例时，解决方案将停止工作。

所以，目前的障碍是：

我有一个用 HTML 定义的菜单，其中一个 <li> 元素（“组合”）中有一个子菜单，并且该 <li> 元素包含字符 ▼ (▼)。
我为<li> 元素设置了一个onclick 事件，这样当它被点击时，它会做两件事：展开/显示子菜单<li> 元素正下方（推动另一个<li>菜单中的元素），并将 ▼ 字符替换为 ▲ 字符 (▲)...直到再次单击 <li> 元素以缩小/隐藏子菜单。
我不确定这是否重要，但此菜单位于网格项内，因为该页面是使用 CSS Grid 设置的。

所以基本上：

首页
关于我们
作品集 ▼
信息
联系方式

...会变成：

首页
关于我们
组合 ▲
- 链接 1
- 链接 2
- 链接 3
信息
联系方式

无论我如何设置类和 ID，我都无法交换箭头符号，并且在某处，我搞砸了编码，现在子菜单甚至不再展开。

这可能是令人尴尬的糟糕代码（考虑到我试图将我见过的样本中的位混合在一起），但这就是我所拥有的。提前致谢。

       var arrowstring = document.getElementById("arrowdirection").innerHTML;
        document.getElementById("IDforPortfolioLink").classList.toggle("show");
        if (IDforPortfolioLink.classList.contains('show')) {
          arrowstring = "&#9650"
        } else {
          arrowstring = "&#9660"
        }
        arrowdirection.textContent = arrowstring;
      }

.sub-menu-content {
display: none;
position: absolute;
  }
.sub-menu-content a {
 display: block;
}
.sub-menu-content a:hover {
 background-color: green;
   }
.show {
display: block;
}

 <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
    
    
      <body>
        <ul class="menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">About us</a></li>
          <li class="LinkForPortfolio" id="IDforPortfolioLink" onclick= "myFunction()"><a href="#">LINK <span class="arrow" id= "arrowdirection">&#9660;</span></a><div class="sub-menu-content" id="myportfolio">
              <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#">Information</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
    </body>
    </html>

【问题讨论】：

标签： javascript menu onclick html-lists innerhtml

【解决方案1】：

嗯，你的代码有很多缺陷，我不得不重写它。我将尽可能解释我在这里所做的一切：

我稍微更改了 HTML：我在导航（容器）中添加了 div，而不是 ul 和 li。这样做更容易，因为它可以保持标记干净，并且更难调试。
我已经分配了nav 一个display: flex; justify-content: center; align-items: center;，它使nav 内的div 居中，并内联它们。我使用nav div 这样做了，它几乎将文本置于其中。
我已经删除了.portfolio 所期望的所有类，因为拥有这么多类是没有用的。
我将div.expand-portfolio 设为div.portfolio 的子级，它本身(.expand-portfolio) 有另一个ul 子级，其中包含链接。您可能已经注意到我添加了.portfolio 和position: relative; 和.expand-portfolio 和position: absolute;。我这样做是因为，我想将.expand-portfolio 带出文档流，这基本上意味着我想让.expand-portfolio 不与页面上的任何元素交互。现在，当将position: absolute; 分配给容器内的孩子时，孩子的位置将相对于 document 而不是父级。这就是为什么您可以将position: relative; 添加到父级的原因。
我创建了一个名为.expanded 的单独类，它为.expand-portfolio 分配了150px 的高度。

您可能还注意到我在nav 中添加了divs transition: 500ms ease，这样做是为了使属性之间的过渡平滑而不是突然。如果您不想这样做，可以从他们那里删除该属性。

现在，javascript。

当我创建这 3 个变量时，它们是页面中元素的引用，您注意到我使用了 document.getElementsByClassName，后跟 [0]。 document.getElementsByClassName() 返回的是：nodelist。 Documentation here。它基本上是一种“数组”，加上 [0] 后，我只选择该类页面的第一个也是唯一一个元素。
您可能已经观察到我在 javascript 文件中添加了 onclick 函数。个人喜好。我说过，当我单击投资组合按钮时，首先，您应该更改该跨度的innerHTML。（span 元素包含实际的符号）。我还说你应该切换.expanded 类。而且，我做了一个 if 语句，检查 .expand-portfolio 不是否包含该类。如果没有，您几乎可以看到它的作用。

我希望它有所帮助。如果您还有其他问题，请在 cmets 中提问。

var portfolio = document.getElementsByClassName("portfolio")[0];
var portfolioInner = document.getElementsByClassName("inner-html")[0];
var expandPortfolio = document.getElementsByClassName("expand-portfolio")[0];

portfolio.onclick = function(){
   portfolioInner.innerHTML = "▲";
   expandPortfolio.classList.toggle("expanded");
   if(!expandPortfolio.classList.contains("expanded")){
    portfolioInner.innerHTML = "▼"
   }
};

html, body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

.menus-container {
height: 100%;
width: auto;
}

.menus-container > div  {
padding: 10px 10px 5px;
transition: 500ms ease;
width: 30%;
height: 100%;
cursor: pointer;
}

.expand-portfolio {
overflow: hidden;
width: 100px;
height: 0; 
background-color: #000;
transition: 500ms ease;
}

.expand-portfolio ul {
 padding-left: 25px;
}

.expand-portfolio ul li {
  padding: 10px 0 10px 0;
  color: #fff;
}

.portfolio span {
  margin-left: 5px;
}

.expanded {
height: 150px;
}

<html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
    
    
      <body>
      <div class="menus-container">
       <div>Home</div>
       <div>About Us</div>
       <div class="portfolio">Portfolio <span class="inner-html">&#9660</span>
        <div class="expand-portfolio">
            <ul>
            <li><a href="#">LINK 1</a></li>
            <li><a href="#">LINK 2</a></li>
            <li><a href="#">LINK 3</a></li>
            </ul>
          </div>
       </div>
       <div>Information</div>
       <div>Contact</div>
       </div>
    </body>
    </html>

【讨论】：

您好 MWR。非常感谢您的解决方案和详细的解释。它将进一步帮助我理解事物如何组合在一起。是否有任何机会，只是为了简单起见，您可以将编码减少到绝对最小值，同时，将菜单保持为简单的垂直菜单，而不是作为水平下拉菜单的一部分-下？再次感谢您。
更多这样的？再次检查 sn-p。
这确实是我需要的菜单样式！谢谢！！我是否能够将子菜单中的单个 LI 元素更改为链接，只需再次将它们包含在中？
是的，确实如此。我在<li>s 中嵌套了<a>s。如果需要，请再次检查 sn-p。
再次感谢 MWR。不知道为什么指针在链接之间移动时不会改变，但我想我现在不用担心了。