ask how to define the parent elements of h3PowerH4
as in the following cases:
<div class="p1">
<h3></h3>
<h4></h4>
</div>
<div class="p2">
<h3></h3>
<h4></h4>
</div>
only needs p1, but does not execute for p2
jquery:
/*
* blogMenu plugin 1.0 2017-09-01 by cary
* :h3,h4
*/
(function ($) {
var Menu = (function () {
/**
*
* @param element jq $("-sharpJ_plugin").plugin() , $("-sharpJ_plugin") element
* @param options
* @constructor
*/
var Plugin = function(element, options) {
//dom jquery
this.$element = $(element);
//obj
this.settings = $.extend({}, $.fn.autoMenu.defaults, typeof options === "object" && options)
//dom
//this.settings = $.extend({}, $.fn.plugin.defaults, this.$element.data(), options);
this.init();
}
/**
* prototype
*
* @type {{}}
*/
Plugin.prototype = {
init: function () {
var opts = this.settings;
//console.log(opts)
this.$element.html(this.createHtml());
this.setActive();
this.bindEvent();
},
createHtml: function(){
var that = this;
var opts = that.settings;
var width = typeof opts.width === "number" && opts.width;
var padding = typeof opts.padding === "number" && opts.padding;
that.$element.width(width+padding*2);
var html = "<ul style="padding:" + padding + "px">";
var num = 0;
$("*").each(function(){
var _this = $(this);
if(_this.get(0).tagName == opts.levelOne.toUpperCase()){
_this.attr("id",num);
var nodetext = that.handleTxt(_this.html());
html += "<li name=""+ num +""><i class="iconfont menu"></i><a href="-sharp"+ num +"">"+ nodetext +"</a></li>";
numPP;
}else if(_this.get(0).tagName == opts.levelTwo.toUpperCase()){
_this.attr("id",num);
var nodetext = that.handleTxt(_this.html());
html += "<li class="sub" name=""+ num +""><i class="iconfont menu"></i><a href="-sharp"+ num +"">"+ nodetext +"</a></li>";
numPP;
}
})
html += "</ul><a href="javascript:void(0);" class="btn-box">"
+"<span class="icon-minus-sign"></span>"
+"</a>";
return html;
},
handleTxt: function(txt){
//HTML
return txt.replace(/<\/?[^>]+>/g,"").trim();
},
setActive: function(){
var $el = this.$element,
opts = this.settings,
items = opts.levelOne + "," + opts.levelTwo,
$items = $(items),
offTop = opts.offTop,
top = $(document).scrollTop(),
currentId;
if($(document).scrollTop()==0){
//active
$el.find("li").removeClass("active").eq(0).addClass("active");
return;
}
$items.each(function(){
var m = $(this),
itemTop = m.offset().top;
if(top > itemTop-offTop){
currentId = m.attr("id");
}else{
return false;
}
})
var currentLink = $el.find(".active");
if(currentId && currentLink.attr("name")!= currentId){
currentLink.removeClass("active");
$el.find("[name="+currentId+"]").addClass("active");
}
},
bindEvent: function(){
var _this = this;
$(window).scroll(function(){
_this.setActive()
});
_this.$element.on("click",".btn-box",function(){
if($(this).find("span").hasClass("icon-minus-sign")){
$(this).find("span").removeClass("icon-minus-sign").addClass("icon-plus-sign");
_this.$element.find("ul").fadeOut();
}else{
$(this).find("span").removeClass("icon-plus-sign").addClass("icon-minus-sign");
_this.$element.find("ul").fadeIn();
}
})
}
};
return Plugin;
})();
/**
* Plugin jq
* plugin
*/
$.fn.autoMenu = function (options) {
return this.each(function () {
var $el = $(this),
menu = $el.data("autoMenu"),
option = $.extend({}, $.fn.autoMenu.defaults, typeof options === "object" && options);
if (!menu) {
//dom
$el.data("autoMenu",new Menu(this, option));
}
/**
*
* $("-sharpid").plugin("doSomething") $("-sharpid).plugin.doSomething();
*/
if ($.type(options) === "string") menu[option]();
});
};
/**
*
*/
$.fn.autoMenu.defaults = {
levelOne : "h3", //
levelTwo : "h4", //
width : 160, //
padding: 10, //
offTop : 120, //
};
/**
* : data-xxx
*
* bootstrap JS
*/
$(function () {
if($("[data-autoMenu]").length>0){
new Menu($("[data-autoMenu]"));
}
});
})(jQuery);