点击第一个菜单显示该菜单的标题，再点击第二个菜单时出现第一个菜单标题下的所有内容

一、效果图

图1：

图2：

图3：

话不多说，上代码！！！！

二、代码

👆 HTML 代码

<!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>Document</title>
  </head>
  <body>
    <div class="search" id="search">
      <form
        action="e/search/index.php"
        method="post"
        name="searchform"
        id="searchform"
      >
        <!-- 左边 -->
        <div id="search-left">
          <svg
            t="1667185674554"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7542"
            width="20"
            height="20"
          >
            <path
              d="M909.059 245.633H114.941C85.705 245.633 62 221.929 62 192.692c0-29.237 23.705-52.941 52.941-52.941h794.118c29.236 0 52.941 23.705 52.941 52.941 0 29.237-23.705 52.941-52.941 52.941zM644.354 564.948H114.941C85.705 564.948 62 541.243 62 512.007c0-29.237 23.705-52.941 52.941-52.941h529.413c29.236 0 52.94 23.705 52.94 52.941 0 29.236-23.704 52.941-52.94 52.941zM803.177 884.249H114.941c-29.236 0-52.941-23.704-52.941-52.94 0-29.237 23.705-52.941 52.941-52.941h688.236c29.236 0 52.94 23.704 52.94 52.941 0 29.236-23.704 52.94-52.94 52.94z"
              p-id="7543"
              fill="#aaa"
            ></path>
          </svg>
          <span id="msg">{{classify}}</span>
          <!-- 弹出框 -->
          <div id="pop-upBox1">
            <div class="pop-upBoxes">
              <div class="pop-big" v-for="(s,i) in searchData">
                <div class="pop-min" :class="[i==num?popAc:'']" @click="a(i)">
                  {{s.classify}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 中间 -->
        <div class="search-middle">
          <input
            type="text"
            :placeholder="msg"
            autocomplete="off"
            id="search-input"
            v-model="inputVul"
          />
          <!-- 弹出框 -->
          <div id="pop-upBox2">
            <div class="pop-upBoxes2">
              <div class="pop2-b" v-for="(s,i) in listItem">
                <div @click="b(i)">{{s}}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右边 -->
        <div class="search-right">
          <div class="search-right2">
            <!-- 右2 -->
            <button id="periodical" v-if="subhead!=null">
              <span>{{subhead}}</span>
            </button>
            <!-- 右1 -->
            <button id="btn1">
              <svg
                t="1667274237453"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2598"
                width="25"
                height="25"
              >
                <path
                  d="M889.6 838.4l-192-192C742.4 595.2 768 524.8 768 448c0-179.2-140.8-320-320-320S128 268.8 128 448s140.8 320 320 320c76.8 0 147.2-25.6 198.4-70.4l192 192c12.8 12.8 32 12.8 44.8 0C896 876.8 896 851.2 889.6 838.4zM192 448c0-140.8 115.2-256 256-256s256 115.2 256 256c0 140.8-115.2 256-256 256S192 588.8 192 448z"
                  p-id="2599"
                  fill="#2351a5"
                ></path>
              </svg>
              <span class="searching">检索</span>
            </button>
          </div>
        </div>
      </form>
    </div>
    <script src="images/jquery-1.11.3.min.js"></script>
    <script src="images/myJs/vue.js"></script>
    <!-- myjs文件 -->
    <script src="images/myJs/myjs.js"></script>
  </body>
</html>

✌ js 代码

// 创建vue，把数据渲染到页面
const app = new Vue({
    el: "#search",
    data: {
        searchData: [{
                classify: "全部",
                msg: "海量资源, 等你发现",
                classifyinfo: ["题名", "作者", "关键词", "摘要"],
                title: "检索",
                subhead: null
            },
            {
                classify: "海洋珍稀舆图",
                msg: "海量资源, 等你发现2",
                classifyinfo: ["题名", "作者", "关键词", "摘要"],
                title: "海洋珍稀舆图",
                subhead: "搜海洋珍稀舆图"
            },
            {
                classify: "海洋珍稀石刻",
                msg: "海量资源, 等你发现3",
                classifyinfo: ["题名", "作者", "关键词", "摘要"],
                title: "海洋珍稀石刻",
                subhead: null
            },
            {
                classify: "海洋珍稀绘画",
                msg: "海量资源, 等你发现4",
                classifyinfo: ["题名", "作者", "关键词", "摘要"],
                title: "摘要",
                subhead: "搜海洋珍稀绘画"
            },
            {
                classify: "海岛珍稀民间文献",
                msg: "海量资源, 等你发现5",
                classifyinfo: ["题名", "作者", "关键词", "摘要"],
                title: "年代",
                subhead: "搜海岛珍稀民间文献"
            },
        ],
        // 页面初始值
        listItem: [
            "海洋奥图", "海洋奥图", "海洋石刻", "海洋古籍", "海洋古籍"
        ],
        msg: "海量资源, 等你发现",
        classify: "全部",
        popAc: 'popAc',
        num: '', // 改变类的
        subhead: null,
        // 文本框的值
        inputVul: null

    },
    methods: {
        // 点击菜单标题的时候，改变页面上的初始值。传遍历后的菜单标题的下标
        a(index) {
            app.listItem = app.searchData[index].classifyinfo
            app.msg = app.searchData[index].msg
            app.classify = app.searchData[index].classify
            app.num = index
            app.subhead = app.searchData[index].subhead

            $("pop-upBox1").style.display = "none";
            setTimeout(() => {
                $("pop-upBox1").style.opacity = "0";
            }, 400);
        },
        // 点击二级菜单的内容，把内容显示在文本框里面
        b(i) {
            app.inputVul = app.listItem[i] + "：";
            console.log(app.inputVul);

            $("pop-upBox2").style.display = "none";
            setTimeout(() => {
                $("pop-upBox2").style.opacity = "0";
            }, 400);
        }
    },

})


// 用于两个弹出框的显示与隐藏：点击按钮或者获取焦点事件时显示，点击页面上别的地方隐藏
function $(id) {
    return document.getElementById(id);
}
window.onload = function () {
    document.onclick = function (e) {
        $("pop-upBox1").style.display = "none";
        setTimeout(() => {
            $("pop-upBox1").style.opacity = "0";
        }, 400);

        $("pop-upBox2").style.display = "none";
        setTimeout(() => {
            $("pop-upBox2").style.opacity = "0";
        }, 400);
    };
    $("search-left").onclick = function (e) {
        $("pop-upBox1").style.display = "block";
        $("pop-upBox2").style.display = "none";
        setTimeout(() => {
            $("pop-upBox1").style.opacity = "1";
        }, 20);
        e = e || event;
        stopFunc(e);
    };
    $("search-input").onclick = function (e) {
        $("pop-upBox2").style.display = "block";
        $("pop-upBox1").style.display = "none";
        setTimeout(() => {
            $("pop-upBox2").style.opacity = "1";
        }, 20);
        e = e || event;
        stopFunc(e);
    };
    $("pop-upBox1").onclick = function (e) {
        e = e || event;
        stopFunc(e);
    };
    $("pop-upBox2").onclick = function (e) {
        e = e || event;
        stopFunc(e);
    };

    // 文本框输入事件
    $("search-input").oninput = function () {
        $("pop-upBox2").style.display = "none";
        setTimeout(() => {
            $("pop-upBox2").style.opacity = "0";
        }, 20);
    };

};

function stopFunc(e) {
    e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);
}

👌 css代码

/* 搜索框 */
.search {
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  position: relative;
}
#search-left{
  height: 55%;
  border-right: 1px solid #dddddd;
  /* border: 1px solid magenta; */
  margin-top: 12px;
  margin-left: 10px;
  padding-right: 13px;
  /* float: left; */
}
#search-left svg{
  margin-left: 3px;
  vertical-align: middle;
}
#search-left:hover svg path{
  fill: #83a439
}

#msg{
  line-height: 20px;
  vertical-align: middle;
  margin-left: 15px;
  color: #333333;
}
#search-left:hover #msg{
  color: #83a439;
}
/* 文本框 */
.search-middle{
  width: 600px;
  height: 100%;
  /* border: 1px solid lawngreen; */

}

.search-middle input::-webkit-input-placeholder{
  color: #aaaaaa;
  font-size: 15px;
}

.search-middle input{
  width: 95%;
  height: 80%;
  /* border: 1px slateblue solid; */
  margin-top: 5px;
  margin-left: 10px;
  border: 0;
  outline: none;
  font-size: 15px;
  color: #4e5969;
}
/* 弹出框1 */
#pop-upBox1{
  width: 271px;
  /* height: 100px; */
  /* border: 1px solid magenta; */
  background-color: #fff;
  color: #000;
  margin-top: 35px;
  margin-left: -12px;
  position: absolute;
  z-index: 1000;
  transition: 0.4s;
  opacity: 0;
  display: none;
  border-radius: 5px;
}
.pop-upBoxes{
  display: flex;
  flex-wrap: wrap;
}
#pop-upBox1::after {
  content: "  ";
  top: -16px;
  left: 15px;
  position: absolute;
  border-width: 8px;
  border-style: solid;
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-bottom-color: white;
}
.pop-big{
  /* width: 50px;
  height: 40px; */
  /* border: 1px solid lawngreen; */
  margin: 5px;
  display: flex;
  flex-wrap: nowrap;
  cursor: pointer;
}
.pop-min{
  /* width: 45px;
  height: 35px; */
  margin: auto;
  margin-top: 3px;
  text-align: center;
  line-height: 35px;
  color: #515a6e;
  font-size: 15px;
  /* border: 1px solid #7eb250; */
  
}
/* 选中时需要添加的类 */
.popAc{
  border: 1px solid #7eb250;
  border-radius: 5px;
  padding: 0px 7px;
}

/* 弹出框2 */
#pop-upBox2{
  /* width: 90px; */
  /* height: 160px; */
  /* border: 1px solid lawngreen; */
  position: absolute;
  z-index: 100;
  margin-top: 20px;
  margin-left: 5px;
  background-color: #fff;
  transition: 0.4s;
  opacity: 0;
  display: none;
}
#pop-upBox2::after {
  content: "  ";
  top: -16px;
  left: 22px;
  position: absolute;
  border-width: 8px;
  border-style: solid;
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-bottom-color: white;
}
.pop2-b{
  /* margin: 15px 0px; */
  padding: 5px 30px;
  /* border: 1px solid red; */
  line-height: 30px;
  color: #0780df;
  cursor: pointer;

  
}
.pop2-b span{
  /* border: 1px solid lawngreen; */
  margin-left: -10px;
}
.pop2-b:hover{
  color: #ff6c00;
}

/* 右边 */
.search-right{
  /* width: 245px; */
  position: absolute;
  right: 0;
  height: 100%;
  /* border: 1px solid firebrick; */
  float: right;
}
.search-right2{
  /* display: flex; */
  height: 100%;
  
}
.search-right button {
  border: 0;
  width: 95px;
  height: 100%;
  float: right;
  background-color: #fff;
}
.btn1{
  background-color: #f0f0f0;
}
.search-right button svg{
  vertical-align: middle;
} 
.searching{
  vertical-align: middle;
  font-size: 15px;
  color: #2d58a9;
  font-weight: bold;
}
#periodical{
  font-size: 15px;
  color: #2d58a9;
  background-color: #f0f0f0;
}
.search-right button:hover svg path{
  fill: #4977cb;
}
.search-right button:hover .searching{
  color: #4977cb;
}
.search-right2 button:hover span{
  color: #4977cb;
}

posted @ 2022-11-01 19:40 __fairy 阅读(69) 评论(0) 编辑收藏举报

刷新页面返回顶部

_fairy

点击第一个菜单显示该菜单的标题，再点击第二个菜单时出现第一个菜单标题下的所有内容

一、效果图

图1：

图2：

图3：

二、代码

👆 HTML 代码

✌ js 代码

👌 css代码

公告