如何实现导航文字与折叠文字的联动

最新推荐文章于 2024-02-27 17:45:16 发布

Zwq8023520

最新推荐文章于 2024-02-27 17:45:16 发布

阅读量154

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/zwq8023520/article/details/127895317

版权

今天需要实现一个需求是点开折叠的菜单文字，导航栏文字按顺序移动并且选中文字高亮。效果图类似以下这样。

核心代码：

/**
   * 创建dom元素
   */
function domToString (node) {
  /**
   * 创建一个div元素
   */
  var tmpNode = document.createElement('div')
  /**
   * 克隆节点
   */
  var deepList = node.cloneNode(true)
  /**
   * 创建的div添加这些克隆节点
   */
  tmpNode.appendChild(deepList)
  var str = tmpNode.innerHTML
  // console.log(str)
  tmpNode = node = null // 解除引用，以便于垃圾回收
  return str
}

$(".unfold")
    .off("click")
    .on("click", ".text6", function (e) {
      var $slidePlace = $(".slidePlace a")
      let x = null
      x = $(this).index()
      if ($slidePlace.length > 7 && x > 2) {

        var $navBtnbox = ""
        $navBtnbox += domToString($slidePlace[x - 3])
        $navBtnbox += domToString($slidePlace[x - 2])
        $navBtnbox += domToString($slidePlace[x - 1])
        $navBtnbox += domToString($slidePlace[x])
        if ($slidePlace.length > x + 1)
          $navBtnbox += domToString($slidePlace[x + 1])
        if ($slidePlace.length > x + 2)
          $navBtnbox += domToString($slidePlace[x + 2])
        if ($slidePlace.length > x + 3)
          $navBtnbox += domToString($slidePlace[x + 3])
        $(".nav").html($navBtnbox)
      } else {
        var $navBtnbox = ""
        var aa = $slidePlace.length > 6 ? 6 : $slidePlace.length
        for (var a = 0; a <= aa; a++) {
          $navBtnbox += domToString($slidePlace[a])
        }
      }
      console.log(e.target.innerText)
      let nav_text = e.target.innerText
      $('.nav a').each((item, exm) => {
        console.log($(exm).text())
        if ($(exm).text() === nav_text) {
          $(exm).addClass('bh')
          $(exm).siblings('a').removeClass('bh')
        }
      })
      $(this).addClass('bh').parent().siblings().removeClass('bh')
      $(".more").removeClass("actived")
      const word1 = $(this).text()
      getList1(word1)
      $(".bumenguizhang").hide()
      $(".diviedConUl").show()
    })

页面元素的整体结构如下：