如何将第三级类别添加到滚动下拉列表


Answers:


2

第三级

        <script>
var maxHeight = 300;
var maxwidth
jQuery.noConflict();
jQuery(function(){

jQuery("li.level0").hover(function() {

var jQuerycontainer = jQuery(this),
jQuerylist = jQuerycontainer.find("ul.level0"),
jQueryanchor = jQuerycontainer.find("a"),
height = jQuerylist.height() * 1.1, // make sure there is enough room at the bottom
multiplier = height / maxHeight; // needs to move faster if list is taller

// need to save height here so it can revert on mouseout
jQuerycontainer.data("origHeight", jQuerycontainer.height());

// so it can retain it's rollover color all the while the dropdown is open
jQueryanchor.addClass("hover");

// make sure dropdown appears directly below parent list item
jQuerylist
.show()
.css({

paddingTop: jQuerycontainer.data("origHeight"),
position:'absolute',
});

// don't do any animation if list shorter than max
if (multiplier > 1) {
jQuerycontainer
.css({
height: maxHeight,
overflow: "hidden",



})
.mousemove(function(e) {
var offset = jQuerycontainer.offset();
var relativeY = ((e.pageY - offset.top) * multiplier) - (jQuerycontainer.data("origHeight") * multiplier);
if (relativeY > jQuerycontainer.data("origHeight")) {
jQuerylist.css("top", -relativeY +jQuerycontainer.data("origHeight"));
};
});
}

}, function() {

var jQueryel = jQuery(this);

// put things back to normal
jQueryel
.height(jQuery(this).data("origHeight"))
.find("ul")
.css({ })
.hide()
.end()
.find("a")
.removeClass("hover");

})});
jQuery (function() {
jQuery("li.level1").hover(function() {

var jQuerycontainer = jQuery(this),
jQuerylist = jQuerycontainer.find("ul.level1"),
jQueryanchor = jQuerycontainer.find("a"),
height = jQuerylist.height() * 1.1, // make sure there is enough room at the bottom

multiplier = height / maxHeight; // needs to move faster if list is taller

// need to save height here so it can revert on mouseout
jQuerycontainer.data("origHeight", jQuerycontainer.height());

// so it can retain it's rollover color all the while the dropdown is open
jQueryanchor.addClass("hover");

// make sure dropdown appears directly below parent list item
jQuerylist
.show()
.css({

//paddingTop: jQuerycontainer.data("origHeight"),
position:'relative',
clear:'both',
});

// don't do any animation if list shorter than max


}, function() {
var jQueryel = jQuery(this);

// put things back to normal
// jQueryel
// .height(jQuery(this).data("origHeight"))
// .find("ul")
// .css({ })
// .hide()
// .end()
// .find("a")
// .removeClass("hover");

})});

//Add down arrow only to menu items with submenus
// jQuery(".nav-primary > li:has('ul')").each(function() {
// jQuery(this).find("a:first").append("<img src='images/down-arrow.png' />");
// });
</script>
<style type="text/css">
ol.dropdown {
position: absolute;
width: 100%;
height: 60px;
}
ol.dropdown li {
background: none repeat scroll 0 0 #ccc;
float: left;
font-weight: bold;
position: relative;
width: 180px;
}
ol.dropdown a:hover {
color: #000;
}
ol.dropdown li a {
color: #222;
display: block;
padding: 20px 8px;
position: relative;
z-index: 904;
}
ol.dropdown li a:hover, ol.dropdown li a.hover {
background: none repeat scroll 0 0 #f3d673;
position: relative;
}
ol.dropdown ul {

display: none;
left: 0;
position: absolute;
top: 0;
width: 100px;
z-index: 902;
}
ol.dropdown ul li {
background: none repeat scroll 0 0 #f6f6f6;
border-bottom: 1px solid #ccc;
color: #000;
font-weight: normal;
}
ol.dropdown ul li a {
background: none repeat scroll 0 0 #eee !important;
display: block;
}
ol.dropdown ul li a:hover {
background: none repeat scroll 0 0 #f3d673 !important;
display: block;
}
ol.dropdown ul li ul {

display: none;
left: 10px;
background-color: #ffc;
/*right: 0;*/



width: 160px;
z-index: 903;
}
ol.dropdown ul li ul li {
background: none repeat scroll 0 0 #f6f6f6;
border-bottom: 1px solid #ffc;
color: #000;
font-weight: normal;
}
ol.dropdown ul li ul li a {
background: none repeat scroll 0 0 #eee !important;
display: block;
}
ol.dropdown ul li ul li a:hover {
background: none repeat scroll 0 0 #f3d673 !important;
display: block;
}

</style>

在此处输入图片说明


您是否添加了css和js函数
Qaisar Satti

如上所述,您将其添加的内容发送到footer.phtml中,我们需要添加的其他位置
rashmi sm

没有它的工作在我身边..
凯萨尔萨蒂

不只是添加了第三级类别,并为它的css和函数正在工作检查您丢失了什么,请尝试在第二个js函数中警报它正在工作或检查您的html层次结构
Qaisar Satti 2015年

没有变化反映..我尝试了所有可能
rashmi sm 2015年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.