个人中心
gpt4 book ai didi

javascript - 基于onclick的子菜单扩展和innerHTML替换，仅使用Javascript

转载 作者：行者123 更新时间：2023-11-30 06:23:55 28 4
gpt4 key购买 nike

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

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

因此，目前的障碍是:

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

所以基本上:

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

...将成为:

  • 首页
  • 关于我们
  • 作品集 ▲
    • 链接 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>

最佳答案

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

  1. 我稍微更改了 HTML:我在导航(容器)中添加了 div，而不是 ul 和 li。这样做更有必要，因为它可以使标记保持干净，并且更容易调试。

  2. 我已经为 nav 分配了一个 display: flex;证明内容:居中； align-items: center; 将 div 在 nav 中居中，并将它们内联。我用 nav div 做到了这一点，它几乎使文本居中。

  3. 我已经删除了 .portfolio 中所有期望的类，因为拥有那么多类是没有用的。

  4. 我让 div.expand-portfolio 成为 div.portfolio 的子级，它本身 (.expand-portfolio) 有另一个 ul child，它包含链接。您可能已经注意到我添加了 .portfolio position: relative; 和 .expand-portfolio position: absolute ;。我这样做是因为，我想从文档流中取出 .expand-portfolio，这基本上意味着我想让 .expand-portfolio 不与任何元素交互这一页。现在，当将 position: absolute; 分配给容器内的子项时，子项的位置将相对于文档 而不是父项。这就是您可以将 position: relative; 添加到父级的原因。

  5. 我创建了一个名为 .expanded 的单独类，它为 .expand-portfolio 指定了 150px 的高度。

您可能还注意到我给 nav 中的 div 设置了一个 transition: 500ms ease，它的作用是进行过渡属性之间顺畅，而不突兀。如果您不想要，您可以从他们那里删除该属性。

现在，javascript。

  1. 当我创建这 3 个变量时，它们是页面元素的引用，您注意到我使用了 document.getElementsByClassName 后跟 [0]。 document.getElementsByClassName() 返回的是:节点列表。 Documentation here .它基本上是一种“数组”，并且附加了 [0]，我只选择页面中具有该类的第一个也是唯一一个元素。

  2. 您可能已经注意到我在 javascript 文件中添加了 onclick 函数。个人喜好。我说过，当我单击组合按钮时，首先，您应该更改该跨度的 innerHTML。 (span 元素包含实际符号)。我还说过您应该切换 .expanded 类。而且，我做了一个 if 语句，检查 .expand-portfolio 是否 包含该类。如果没有，您几乎可以看到它的作用。

希望对你有所帮助。如果您还有其他问题，请在评论中提问。 

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>

关于javascript - 基于onclick的子菜单扩展和innerHTML替换，仅使用Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51613720/

28 4 0
文章推荐： javascript - 在 withTracker 中使用 ReactiveVar 和 Meteor.call 避免无限循环？
文章推荐： javascript - 动态创建的元素上的事件绑定(bind)？
文章推荐： javascript - Google Scripts - 从退回的邮件中获取电子邮件地址并解析信息
文章推荐： java - 创建浏览器 - 将 `URL` 保存为列表中的字符串时出现错误消息？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com