如何在jQuery中使用下拉菜单显示div元素

如何在jQuery中使用下拉菜单显示div元素，可以通过以下步骤实现：

准备工作

首先需要引入jQuery库，在HTML头部添加如下代码：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

HTML结构

在HTML中需要定义一个div元素，用于显示下拉菜单，同时在下拉菜单中添加需要显示的div元素。

示例代码如下：

<div class="dropdown">
  <button class="dropdown-toggle" type="button" data-toggle="dropdown">下拉菜单</button>
  <div class="dropdown-menu">
    <div id="content1">内容1</div>
    <div id="content2">内容2</div>
  </div>
</div>

CSS样式

为了能够使下拉菜单正常显示，需要添加对应的CSS样式.

示例代码如下：

<style>
  .dropdown-menu {
    display: none; /* 隐藏下拉菜单 */
    position: absolute; /* 绝对定位 */
    background-color: #f9f9f9;
    min-width: 160px;
    z-index: 1;
  }

  .dropdown-menu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown:hover .dropdown-menu {
    display: block; /* 鼠标悬停时显示下拉菜单 */
  }
</style>

JavaScript代码

最后，在JavaScript中需要添加对应的代码，用于在下拉菜单中点击时，显示对应的div元素。

示例代码如下：

$(document).ready(function(){
  $('#content1').hide(); // 隐藏内容1
  $('#content2').hide(); // 隐藏内容2

  $('.dropdown-menu div').click(function(){
    var id = $(this).attr('id');
    $('#' + id).show().siblings().hide(); // 显示对应的div元素
  });
});

示例1

实现一个基本的下拉菜单，并在下拉菜单中点击对应选项时，显示对应的div元素。

完整示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>示例1</title>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
      .dropdown-menu {
        display: none; /* 隐藏下拉菜单 */
        position: absolute; /* 绝对定位 */
        background-color: #f9f9f9;
        min-width: 160px;
        z-index: 1;
      }

      .dropdown-menu a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }

      .dropdown:hover .dropdown-menu {
        display: block; /* 鼠标悬停时显示下拉菜单 */
      }
    </style>
    <script>
      $(document).ready(function(){
        $('#content1').hide(); // 隐藏内容1
        $('#content2').hide(); // 隐藏内容2

        $('.dropdown-menu div').click(function(){
          var id = $(this).attr('id');
          $('#' + id).show().siblings().hide(); // 显示对应的div元素
        });
      });
    </script>
  </head>
  <body>
    <div class="dropdown">
      <button class="dropdown-toggle" type="button" data-toggle="dropdown">下拉菜单</button>
      <div class="dropdown-menu">
        <div id="content1">内容1</div>
        <div id="content2">内容2</div>
      </div>
    </div>
  </body>
</html>

在浏览器中打开该HTML文件，即可看到实现的下拉菜单效果。

示例2

在示例1的基础上，增加一个“更多”选项，点击时显示所有的div元素。

完整示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>示例2</title>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
      .dropdown-menu {
        display: none; /* 隐藏下拉菜单 */
        position: absolute; /* 绝对定位 */
        background-color: #f9f9f9;
        min-width: 160px;
        z-index: 1;
      }

      .dropdown-menu a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }

      .dropdown:hover .dropdown-menu {
        display: block; /* 鼠标悬停时显示下拉菜单 */
      }
    </style>
    <script>
      $(document).ready(function(){
        $('.dropdown-menu div').click(function(){
          var id = $(this).attr('id');
          if (id == 'more') {
            $('.dropdown-menu div').show();
          } else {
            $('#' + id).show().siblings().hide(); // 显示对应的div元素
          }
        });
      });
    </script>
  </head>
  <body>
    <div class="dropdown">
      <button class="dropdown-toggle" type="button" data-toggle="dropdown">下拉菜单</button>
      <div class="dropdown-menu">
        <div id="content1">内容1</div>
        <div id="content2">内容2</div>
        <div id="more">更多</div>
      </div>
    </div>
  </body>
</html>

在浏览器中打开该HTML文件，即可看到实现的下拉菜单效果。当选择“更多”选项时，会显示所有的div元素。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何在jQuery中使用下拉菜单显示div元素 - Python技术站

如何在jQuery中使用下拉菜单显示div元素

准备工作

HTML结构

CSS样式

JavaScript代码

示例1

示例2

相关文章