如何在 CSS 中对齐下拉列表 使用 JS 的基本示例

分类：编程问答

如何解决如何在 CSS 中对齐下拉列表 使用 JS 的基本示例

我正在制作一个网站，我想制作一个下拉列表，但我遇到了麻烦。 我想做这样的事情：

选项A选项B选项C选项D选项E

还有一个带有 4 个选项的 B 的下拉列表，但是当我这样做时，它看起来像这样：

选项 A 选项 B
.....................选项1
………………选项2
………………选项3
........................选项 4
.........................................选项 C 选项 D 选项 E

这是我的代码：

.option {
  display: inline-block;
}

.option>li {
  display: inline;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <nav>

    <ul>

      <div class="option">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a>

          <ul>
            <li><a href="#">3D</a>
              <li><a href="#">2D</a>
                <li><a href="#">Websites</a>
                  <li><a href="#">IT help</a>
          </ul>

          </li>
      </div>
      <div class="option">
        <li><a href="#">gallery</a>
          <li><a href="#">Contact</a>
            <li><a href="#">About Me</a>
      </div>

    </ul>
  </nav>
</body>

</html>
</nav>

解决方法

重组你的 HTML

  1. 关闭您的 li 标签。确保您正确关闭它们，例如 这： 
    <li><a href="#">Home</a></li>
  2. 将所有顶级菜单项（主页、服务、图库、联系人、关于我）嵌入一个 ul

你的 HTML 应该是这样的

<nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a>
          <ul>
              <li><a href="#">3D</a></li>
              <li><a href="#">2D</a></li>
              <li><a href="#">Websites</a></li>
              <li><a href="#">IT help</a></li>
          </ul>
      </li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About Me</a></li>
    </ul>
</nav>

添加样式

  1. 向服务 li 添加一个类以表明它是一个下拉列表。我叫我的dropdown
  2. 使用 list-style: none; padding: 0; 删除每个列表项上那些讨厌的点
  3. 要水平排列顶层 ul，通过在 display: flex; 上应用 ul 使其成为弹性盒。我还会添加 flex-wrap: none; 以确保列表不会尝试在小屏幕上包装其元素。
  4. 我建议给 flexbox 的每个元素一个恒定的宽度，并按照你喜欢的方式对齐文本。我用了 width: 80px; text-align: center;
  5. 最后，通过将内部 ul 的 display 设置为 none 来隐藏下拉列表的元素。并通过将 display 设置为 block 来显示下拉列表。我使用 open
    6. 类做到了这一点 

ul {
  list-style: none;
  padding: 0;
}

nav > ul {
  display: flex;
  flex-wrap: none;
}

nav > ul > li {
  width: 80px;
  text-align: center;
}

nav > ul > li.dropdown > ul > * {
  display: none;
}

nav > ul > li.dropdown.open > ul > * {
  display: block;
}
<nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li class="dropdown"><a href="#">Services</a>
          <ul>
              <li><a href="#">3D</a></li>
              <li><a href="#">2D</a></li>
              <li><a href="#">Websites</a></li>
              <li><a href="#">IT help</a></li>
          </ul>
      </li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About Me</a></li>
    </ul>
</nav>

添加互动

现在，如果您想要真正展开子菜单，我建议您使用 JavaScript。在上面的代码片段中，您需要做的就是将任何 open 上的 li 类切换为 dropdown 类。

有无限的可能性，但最好的起点是 W3 Schools tutorial on building clickable dropdown menus。阅读此 W3 tutorial on building accessible flyout menues 时也请注意无障碍功能。

这是关于构建 CSS only accessible dropdown menu 的教程；虽然我建议坚持使用 JS 解决方案，因为它们更通用。

使用 JS 的基本示例

const dropdownMenuItems = document.querySelectorAll("li.dropdown");

const toggleDropdown = (e,el) => {
  if (e.target.classList.contains("dropdown-control")) {
    el.classList.toggle("open");
  }
};

dropdownMenuItems.forEach((el) => {
  el.addEventListener("click",(e) => toggleDropdown(e,el));
});
ul {
  list-style: none;
  padding: 0;
}

nav > ul {
  display: flex;
  flex-wrap: none;
}

nav > ul > li {
  width: 80px;
  text-align: center;
}

nav > ul > li.dropdown > ul > * {
  display: none;
}

nav > ul > li.dropdown.open > ul > * {
  display: block;
}
<nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li class="dropdown"><a href="#" class="dropdown-control">Services</a>
          <ul>
              <li><a href="#">3D</a></li>
              <li><a href="#">2D</a></li>
              <li><a href="#">Websites</a></li>
              <li><a href="#">IT help</a></li>
          </ul>
      </li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About Me</a></li>
    </ul>
</nav>

结束想法

我保持样式非常简单。你当然可以随意设计。似乎您主要是在问如何正确安排。

如果服务 a 标签的行为不像链接，则将其更改为 button 可能是有意义的。这对于屏幕阅读器了解如何处理该元素很重要。

,

您可以使用 2 个选项和网格区域类来实现

const dropdownMenuItems = document.querySelectorAll("li.dropdown");

const toggleDropdown = (e,el) => {
  if (e.target.classList.contains("dropdown-control")) {
    el.classList.toggle("open");
  }
  document.getElementById("option2").classList.toggle("opt")

};

dropdownMenuItems.forEach((el) => {
  el.addEventListener("click",el));
});
.menu {
  display: grid;
  grid-template-columns: repeat(2,auto);
  grid-template-rows: repeat(2,1fr);
  list-style: none;
  justify-content: flex-start;
}
.option1,.option2 {
  display: flex;
}

.option1 > li,.option2 > li {
  margin: 10px;
}

.option1 {
  grid-area: 1 / 1 / 2 / 2;
  justify-self: end;
}

.opt{
  grid-area: 2 / 2 / 3 / 3;
}

ul {
  list-style: none;
  padding: 0;
}

nav > ul {
  display: flex;
  flex-wrap: none;
}

nav > ul .option1 > > li {
  width: 80px;
  text-align: center;
}

nav > ul > .option1 > li.dropdown > ul > * {
  display: none;
}

nav > ul > .option1 >  li.dropdown.open > ul > * {
  display: block;
}
<nav>  
  <ul class="menu">      
      <div class="option1">
        <li><a href="#">Home</a></li>
        <li class="dropdown"><a class="dropdown-control" href="#">Services</a>
            <ul>
                <li><a href="#">3D</a>
                <li><a href="#">2D</a>
                <li><a href="#">Websites</a>
                <li><a href="#">IT help</a>
            </ul>
        </li>
      </div>

      <div id="option2" class="option2">
        <li><a href="#">Gallery</a>
        <li><a href="#">Contact</a>
        <li><a href="#">About Me</a>
      </div>
  </ul>       
</nav>

,

我会这样做：它有点裸，但它有效。我会让每个 li 都拥有 option 的类并去掉 div 以使其更加一致和简单。此外，您遗漏了所有的结束 li 标签，这让一些事情变得一团糟。我还添加了一个简单的 :hover 机制，以便当您将鼠标悬停在它上面时它会隐藏和显示。

.option {
  display: inline-block;
  vertical-align: top;
  width: 75px;
  margin: 0;
  padding: 0;
}

.dropdown {
  display: none;
  padding: 0;
  list-style-type: none;
}

.contains-dropdown:hover > .dropdown{
  display: block
}

option>li {
  display: inline;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <nav>

    <ul>

      <li class="option"><a href="#">Home</a></li>


      <li class="option contains-dropdown">
        <a href="#">Services</a>

        <ul class="dropdown">
          <li><a href="#">3D</a></li>
          <li><a href="#">2D</a></li>
          <li><a href="#">Websites</a></li>
          <li><a href="#">IT help</a></li>
        </ul>

      </li>

      <li class="option"><a href="#">Gallery</a></li>

      <li class="option"><a href="#">Contact</a></li>

      <li class="option"><a href="#">About Me</a></li>

    </ul>
  </nav>
</body>

</html>
</nav>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
Java在半透明框架/面板/组件上重新绘画
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName”和“ Class.forNamenewInstance”之间有什么区别？
Java“ Class.forName（）”和“ Class.forName（）。newInstance（）”之间有什么区别？
在此环境中不提供编译器也许是在JRE而不是JDK上运行？
在此环境中不提供编译器。也许是在JRE而不是JDK上运行？
Java用相同的方法在一个类中实现两个接口哪种接口方法被覆盖？
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖？
Java 什么是Runtime.getRuntimetotalMemory和freeMemory？
Java 什么是Runtime.getRuntime（）。totalMemory（）和freeMemory（）？
java.library.path中的java.lang.UnsatisfiedLinkError否*****dll
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的” 即使在同一包装中
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类怎么处理？
Java 导入两个具有相同名称的类。怎么处理？
Java 是否应该在HttpServletResponse.getOutputStream/getWriter上调用.close？
Java 是否应该在HttpServletResponse.getOutputStream（）/。getWriter（）上调用.close（）？
Java RegEx元字符和普通点？
Java RegEx元字符（。）和普通点？
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot