用JavaScript函数实现类似下拉菜单的方法

用JavaScript函数实现类似下拉菜单的方法

<script>
    // 给li定义一个变量circle，给div定义一个变量chunk
  var circle, chunk;
//   执行函数
  init();
//   创建一个函数init
  function init() {
    //   用for循环获取1-5的数字
    for (i = 1; i < 6; i++) {
        // 分别获取li的id
      var li = document.getElementById("li" + i);
    //   创建一个点击事件 当点击时执行后面的函数
      li.onclick = function() {
        // this就是指当前被点击元素
        // 执行第三个函数给li获取对应的div
        var div = two(this);
        // 点击时的li和对应的div带入函数中获取对应的样式
        three(this, div);
      };
    }
  }
  function two(li) {
    // 如果点击的li.id时li1时就获取对应的div1
    if (li.id === "li1") return document.getElementById("div1");
    // 如果点击的li.id时li2时就获取对应的div2
    if (li.id === "li2") return document.getElementById("div2");
    // 如果点击的li.id时li3时就获取对应的div3
    if (li.id === "li3") return document.getElementById("div3");
    // 如果点击的li.id时li4时就获取对应的div4
    if (li.id === "li4") return document.getElementById("div4");
    // 如果点击的li.id时li5时就获取对应的div5
    if (li.id === "li5") return document.getElementById("div5");
  }
  // 设置一个函数 设置两个参数
  function three(li, div) {
    if (circle) {
        // 清除上次点击的样式
      circle.style.backgroundColor = "rgba(0,0,0,0)";
    }
    // 当点击时把li的值赋给circle
    circle = li;
    // 给circle设置样式
    circle.style.backgroundColor = "red";
    if (chunk) {
        // 将上次的样式隐藏
      chunk.style.display = "none";
    }
    // 把div的值赋给chunk
    chunk = div;
    // 给chunk设置样式
    chunk.style.display = "block";
  }
</script>