下拉选择框实现

最新推荐文章于 2024-08-05 20:23:16 发布

浪迹之水

最新推荐文章于 2024-08-05 20:23:16 发布

阅读量414

点赞数

分类专栏： html 文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/u012197726/article/details/125079484

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍如何使用CSS和JavaScript创建一个响应式的下拉框组件，包括输入框及隐藏的选项列表，点击输入框或选项时实现动态选择。通过HTML、CSS样式和jQuery事件处理，实现实时切换内容并控制列表显示与隐藏。

摘要由CSDN通过智能技术生成

效果：
在这里插入图片描述
代码：

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>下拉框</title>
	
  <link rel="stylesheet" href="./css/normal.css">
  <style>
    * {
      box-sizing: border-box;
    }

    .input-content {
      position: relative;
      display: inline-block;
      vertical-align: middle;

    }

    .input-content>input {
      width: 360px;
      height: 32px;
      border-radius: 2px;
      border: 1px solid #DCDEE2;
      padding: 0 30px 0 10px;
      cursor: pointer;
      background: url(./images/arrow.png) no-repeat calc(100% - 10px) center;/*右边箭头图片*/
    }

    .list {
      width: 100%;
      position: absolute;
      top: 38px;
      right: 0;
      border: 1px solid #DCDEE2;
      height: 162px;
      max-height: 162px;
      overflow: auto;
      display: none;
    }

    .list li {
      line-height: 32px;
      padding: 0 20px;
    }

    .list li:hover {
      background: #edebeb;
      cursor: pointer;
    }
  </style>

</head>

<body>
  <div class="input-select">
    <label for="">下拉框：</label>
    <div class="input-content">
      <input type="text" class="input-box" placeholder="请选择">
      <ul class="list">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
        <li>内容5</li>
        <li>内容6</li>
        <li>内容7</li>
        <li>内容8</li>
      </ul>
    </div>

  </div>

  <script src="./js/jquery-2.1.3.min.js"></script>
  <script>
    $('.input-box').on('click', function () {
      $('.list').toggle()

    })
    $('.list').on('click', 'li', function () {
      $('.input-box').val($(this).text())
      $('.list').hide()
      $(this).parents()
    })
    $(document).on('click', function (e) {
      console.log($((e.target || e.srcElement)).closest('.input-content'));
      if (0 == $((e.target || e.srcElement)).closest('.input-content').length) {
        $('.list').hide();
      }
    });
  </script>
</body>

</html>