今天需要实现一个需求是点开折叠的菜单文字,导航栏文字按顺序移动并且选中文字高亮。效果图类似以下这样。
核心代码:
/**
* 创建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()
})
页面元素的整体结构如下: