JavaScript 问题解决 —— 通用模拟下拉框

目录

1.html 结构

2.css 样式

3.js 逻辑（重要）

---

• 最终实现效果：
• 

1.html 结构

    <div class="mock_select_box">
      <div class="mock_select_box_title">
        <span>全部</span>
      </div>
      <ul class="mock_select_box_pop">
        <li>列表内容111</li>
        <li>列表内容222</li>
      </ul>
    </div>

2.css 样式

    @font-face {
        src: url("SourceHanSansCN-Normal.ttf");
        font-family: "SourceHanSansCN-Normal";
      }
      .mock_select_box {
        position: absolute;
        top: 19px;
        left: 212px;
        width: 100px;
        height: 30px;
        background: rgba(7, 113, 192, 0.75);
        border: none;
        border-radius: 4px;
        color: #fff;
        font-size: 12px;
        font-family: "SourceHanSansCN-Normal";
        cursor: pointer;
        outline: none;
        z-index: 1;
      }
      .mock_select_box .mock_select_box_title {
        width: 100%;
        height: 30px;
        box-sizing: border-box;
        padding: 0 8px;
        line-height: 28px;
        cursor: pointer;
      }
      .mock_select_box .mock_select_box_title span {
        font-size: 12px;
        font-family: "SourceHanSansCN-Normal";
        color: #fff;
      }
      .mock_select_box.select_down {
        background: url(Triangle-down.png) no-repeat 92% rgba(7, 113, 192, 0.75);
      }
      .mock_select_box.select_up {
        background: url(Triangle-up.png) no-repeat 92% rgba(7, 113, 192, 0.75);
      }
      .mock_select_box .mock_select_box_pop {
        display: none;
        position: absolute;
        /* box-sizing: border-box; */
        width: 100%;
        max-height: 200px;
        margin: 2px 0;
        padding: 0;
        border: none;
        border-radius: 4px;
        background: rgba(7, 113, 192, 0.75);
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1;
      }
      .mock_select_box .mock_select_box_pop li {
        width: 100%;
        height: 30px;
        line-height: 28px;
        padding: 0 8px;
        box-sizing: border-box;
        font-size: 12px;
        font-family: "SourceHanSansCN-Normal";
        color: #fff;
        cursor: pointer;
        list-style: none;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      /* 滚动条整体部分 */
      .mock_select_box .mock_select_box_pop::-webkit-scrollbar {
        width: 3px;
        background-color: transparent;
      }
      /* scroll轨道背景 */
      .mock_select_box .mock_select_box_pop::-webkit-scrollbar-track {
        border-radius: 1.5px;
        background-color: transparent;
      }
      /* 滚动条中能上下移动的小块 */
      .mock_select_box .mock_select_box_pop::-webkit-scrollbar-thumb {
        border-radius: 1.5px;
        background-color: transparent;
      }

3.js 逻辑（重要）

• 需要引入的文件：

  <script src="jquery-3.3.1.min.js"></script>

• 点击模拟框后，实现右侧箭头方向切换、实现模拟下拉框隐藏显示切换

    // 默认箭头状态    
    $(".mock_select_box").addClass("select_down"); 
    // 点击模拟框后
    $(".mock_select_box .mock_select_box_title").click(function () { 
      // 模拟下拉框进行切换 toggle()
      $(this).next(".mock_select_box_pop").toggle();
      // 判断箭头状态并进行更改
      if ($(this).parent(".mock_select_box").hasClass("select_down")) {
        $(this)
          .parent(".mock_select_box")
          .removeClass("select_down")
          .addClass("select_up");
      } else {
        $(this)
          .parent(".mock_select_box")
          .removeClass("select_up")
          .addClass("select_down");
      }
    });

•  点击模拟下拉框列表后，实现给模拟框重新赋值，实现右侧箭头方向切换、实现模拟下拉框隐藏显示切换

    $(".mock_select_box .mock_select_box_pop li").click(function () {
      // 当前被点击的列表的文字
      var nowText = $(this).text();
      // 将选择的列表文字 赋值给 模拟框
      $(this).parents(".mock_select_box").find("span").text(nowText);
      // 判断并改变箭头状态
      if ($(this).parents(".mock_select_box").hasClass("select_down")) {
        $(this)
          .parents(".mock_select_box")
          .removeClass("select_down")
          .addClass("select_up");
      } else {
        $(this)
          .parents(".mock_select_box")
          .removeClass("select_up")
          .addClass("select_down");
      }
      // 改变模拟下拉框的状态
      $(this).parent(".mock_select_box_pop").hide();
    });

• 更正（防止数据被写死）：

// 监测数据土地类型点击事件
$(document).on("click", "#landType li", function () {
    var txt = $(this).text();
    var code=$(this).attr('code');

    $(this).parents(".mock_select_box_pop")
    .siblings(".mock_select_box_title")
    .children("span").text(txt);
    $(this).parents(".mock_select_box_pop").slideUp();
      });
  },