注意：我不得不降級(jí)jQuery以匹配托西菲
當(dāng)你仍然依賴j查詢時(shí)，重寫jQuery有什么意義？
到目前為止無(wú)法訪問(wèn) HTML 的調(diào)查結(jié)果
j 查詢也不起作用 - .大小已在 jQuery 3.0 中刪除。請(qǐng)改用 .length 屬性。翻譯成 - 香草沒有document.querySelectorAll("#content h1").lengthhas
您的方式是您必須在文檔后添加JS。而是使用(function() {window.addEventListener("load",function() {
附加不是香草
element.attr不是香草。 或者只是element.getAttribute("id")element.id
show/hide不是香草。您需要 OR 使用媒體查詢或設(shè)置屬性classList.toggle("hide")hidden
element.resize不是香草。 是或window.addEventListener("resize", handleTocOnResize);element.onresize
get元素ByName 在 ID 上無(wú)效，如果元素具有名稱，則會(huì)返回節(jié)點(diǎn)列表，而名稱不是 div 上的有效屬性。
getElementsByClassName您無(wú)法更改節(jié)點(diǎn)列表上的類 - 我已更改為querySelector
文檔寬度不是香草。
window.addEventListener("load", function() {
document.getElementById("toc").innerHTML += "<div id='generated-toc'></div>";
const $genToc = $("#generated-toc"); // seems it MUST be a jQuery object
$genToc.tocify({
extendPage: true,
context: "#content",
highlightOnScroll: true,
hideEffect: "slideUp",
hashGenerator: function(text, element) {
return element.id;
},
smoothScroll: false,
theme: "none",
selectors: document.querySelectorAll("#content h1").length > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
ignoreSelector: ".discrete"
});
var handleTocOnResize = function() {
// https://gist.github.com/joshcarr/2f861bd37c3d0df40b30
const w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth;
const show = x < 768 // or use media queries
// $genToc[0].classList.toggle("hide", !show);
document.querySelector(".sectlevel0").classList.toggle("hide", show);
document.querySelector(".sectlevel0").classList.toggle("hide", show);
}
window.addEventListener("resize", handleTocOnResize);
handleTocOnResize();
});
.hide {
display: none
}
.tocify-header {
font-style: italic;
}
.tocify-subheader {
font-style: normal;
font-size: 90%;
}
.tocify ul {
margin: 0;
}
.tocify-focus {
color: #7a2518;
background-color: rgba(0, 0, 0, 0.1);
}
.tocify-focus > a {
color: #7a2518;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script>
<div id="content">
<h1>Toc</h1>
<p class="sectlevel0">Level 0</p>
<p class="sectlevel1">Level 1</p>
</div>
<div id="toc"></div>
j查詢測(cè)試版本，看看我們是否可以使原始代碼工作
const handleTocOnResize = function() {
const show = $(document).width() < 768;
$("#generated-toc").toggle(!show);
$(".sectlevel0").toggle(show);
$(".sectlevel1").toggle(show);
};
$(function() {
$("#toc").append("<div id='generated-toc'></div>");
$("#generated-toc").tocify({
extendPage: true,
context: "#content",
highlightOnScroll: true,
hideEffect: "slideUp",
hashGenerator: function(text, element) {
return $(element).attr("id");
},
smoothScroll: false,
theme: "none",
selectors: $("#content h1").length > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
ignoreSelector: ".discrete"
});
$(window).on("resize", handleTocOnResize);
handleTocOnResize();
});
.hide {
display: none
}
.tocify-header {
font-style: italic;
}
.tocify-subheader {
font-style: normal;
font-size: 90%;
}
.tocify ul {
margin: 0;
}
.tocify-focus {
color: #7a2518;
background-color: rgba(0, 0, 0, 0.1);
}
.tocify-focus>a {
color: #7a2518;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script>
<div id="content">
<h1>Toc</h1>
<p class="sectlevel0">Level 0</p>
<p class="sectlevel1">Level 1</p>
</div>
<div id="toc"></div>
