使用Jquery或CSS显示具有子类别的类别 [英] Display categories with subcategories using Jquery or CSS
本文介绍了使用Jquery或CSS显示具有子类别的类别的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有类别及其子类别列表...当鼠标移动到类别或单击类别时我需要显示子类别...只需检查网站 http://www.olx.in/posting.php?src=8 [ ^ ] ....我需要显示类别和子类别，如链接..类别在一列中，子类别在另一列中...
解决方案
我希望修剪相同的代码，它会帮助你编写自己的代码...
please don'复制并粘贴。
编写自己的代码。
Amir
< < span class =code-leadattribute>！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 < span class =code-attribute> 严格// EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd >
< head >
< link rel = stylesheet type = <跨度 class =code-keyword> text / css href = http://static03.olx-st.com/frontEnd/in/assets/css/v4/newposting-69aaaae2.css media = screen / > <！ - 布局Css你可以定义你的 - >
< link rel = stylesheet 类型 = text / css href = http://static02.olx-st.com/frontEnd/in/assets/css/src/olx/v5/olx-icon-font-69aaaae2.css media = screen / > <！ - 这是brining类别的图像 - >
< 链接 rel =stylesheet type = text / css href = http://static01.olx-st.com/frontEnd/in/assets /css/src/olx/v5/olx-footer-69aaaae2.css\" media = screen / >
< script type = text / javascript src = http://static04.olx-st.com/js/ system / cookies-69aaaae2.js > < / script >
< / head >
< body class = IN post-categories >
<！ - the-content LAST GENERATED =星期二，01四月2014 06:54:10 GMT - >
< div 类 = 发布页面 >
< div id = supercontainer >
< div id = category-posting class = corner-radius & gt;
< h2 > & nbsp; < / h2 >
< div id = home class = ab-cs >
< h3 > < span class =code-keyword>< span > 1 < / span > 选择一个类别：< / h3 >
< ul >
< li id = c-830 > ;
< b class = icon-830 > < / b > 手机&平板电脑
< b class = icon-arrow_right < span class =code-keyword>> < / b >
< h3 > < span > 2 < / span > 选择一个子类别：< / h3 >
< ul >
< < span class =code-leadattribute> li id = c-831 >
< a href = http://www.olx.in/posting.php?categ_id=831 > 移动电话< / a >
< / li >
< 利 id = c-857 >
< a href = http://www.olx.in/posting.php?categ_id=857 > 平板电脑< / a >
< / li >
< li id = c-832 >
< a < span class =code-attribute> href = http://www.olx.in/posting.php?categ_id=832 > 移动配件< / a >
< / li >
< / ul >
< / li >
< / ul >
< / div >
< / div >
< span class =code-keyword>< / div >
< script type = text / javascript charset = iso-8859-1 src = http://static02.olx-st.com/js/common-69aaaae2.js > < / script >
<！ - 开始JsEnqueuer - >
< script 类型 =' text / javascript' < span class =code-attribute> > // <！[CDATA [
jQuery（' #home.ab-cs> ul> li'）。mouseenter（ function （e）{
if （jQuery（' 。cat-activa'）。length == 0 ）{
if （jQuery（ this ）。 parent（）。find（' li.cat-hover-new'）。length == 0 ）{
jQuery（ this ）。addClass（ ' cat-hover-new'）。find（' ul'）。show（）;
lastDisplayedL2 = this ;
fixOffset（jQuery（此））;
}
其他 {
var _this = 此;
if （setTimer）{
clearTimeout（setTimer）;
}
setTimer = setTimeout（ function （）{
jQuery（_this）.parent（）。find（ 。cat-hover-new'）。removeClass（'' cat-hover-new'）。find（' ul'）。hide（）;
jQuery（_this）.addClass（' cat- hover-new'）。find（' ul'）。show（）;
lastDisplayedL2 = _this;
fixOffset（jQuery（_this））;
}， 300 ）;
}
}
}）;
_gaqEvent.push（ function （）{
jQuery（ document ）。click（ function （e）{ return _olxga.catchLinkDomain（e）;}）;
}）;
loadSessionInfo（ 1 ，{ seoArea ： India， currentHost： www.olx.in ， searchPages： http：\ / \ / www.olx.in\ / list.php， dynamicSearchCategory： http：\ / \\ \\ / www.olx.in \ / nf \ / cat-CATEGORY \ / KEYWORDS， dynamicSearch： http：\ / \ / www.olx.in \ / nf\ / search\ /关键词< /跨度>}）;
// ]]>< / script><！ - End JsEnqueuer - >
< / body >
< / html >
I have categories and its subcategories list...I need to display subcategories when mouse move over the category or click the category...Just check the site http://www.olx.in/posting.php?src=8[^] .... I need to show categories and subcategories like the link.. categories in one column, subcategories in another colunm...
解决方案
I trimmed the same code for you hope, it'll help you to write your own Code...
please don't copy and paste.
write your own code.
Amir
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <link rel="stylesheet" type="text/css" href="http://static03.olx-st.com/frontEnd/in/assets/css/v4/newposting-69aaaae2.css" media="screen" /> <!-- Layout Css you can define yours --> <link rel="stylesheet" type="text/css" href="http://static02.olx-st.com/frontEnd/in/assets/css/src/olx/v5/olx-icon-font-69aaaae2.css" media="screen" /> <!-- This is brining Image of the category--> <link rel="stylesheet" type="text/css" href="http://static01.olx-st.com/frontEnd/in/assets/css/src/olx/v5/olx-footer-69aaaae2.css" media="screen" /> <script type="text/javascript" src="http://static04.olx-st.com/js/system/cookies-69aaaae2.js"></script> </head> <body class="IN posting-categories"> <!-- the-content LAST GENERATED=Tue, 01 Apr 2014 06:54:10 GMT--> <div class="posting-page"> <div id="supercontainer"> <div id="category-posting" class="corner-radius"> <h2> </h2> <div id="home" class="ab-cs"> <h3><span>1</span> Select a category:</h3> <ul> <li id="c-830"> <b class="icon-830"></b>Mobiles & Tablets <b class="icon-arrow_right"></b> <h3><span>2</span> Select a subcategory:</h3> <ul> <li id="c-831"> <a href="http://www.olx.in/posting.php?categ_id=831">Mobile Phones</a> </li> <li id="c-857"> <a href="http://www.olx.in/posting.php?categ_id=857">Tablets</a> </li> <li id="c-832"> <a href="http://www.olx.in/posting.php?categ_id=832">Mobile Accessories</a> </li> </ul> </li> </ul> </div> </div> </div> <script type="text/javascript" charset="iso-8859-1" src="http://static02.olx-st.com/js/common-69aaaae2.js"></script> <!-- Begin JsEnqueuer --> <script type='text/javascript' >//<![CDATA[ jQuery('#home.ab-cs > ul > li').mouseenter(function(e) { if(jQuery('.cat-activa').length == 0) { if(jQuery(this).parent().find('li.cat-hover-new').length == 0) { jQuery(this).addClass('cat-hover-new').find('ul').show(); lastDisplayedL2 = this; fixOffset(jQuery(this)); } else { var _this = this; if(setTimer) { clearTimeout(setTimer); } setTimer = setTimeout(function(){ jQuery(_this).parent().find('.cat-hover-new').removeClass('cat-hover-new').find('ul').hide(); jQuery(_this).addClass('cat-hover-new').find('ul').show(); lastDisplayedL2 = _this; fixOffset(jQuery(_this)); },300); } } }); _gaqEvent.push(function() { jQuery(document).click(function(e) { return _olxga.catchLinkDomain(e); }); }); loadSessionInfo(1, {"seoArea":"India","currentHost":"www.olx.in","searchPages":"http:\/\/www.olx.in\/list.php","dynamicSearchCategory":"http:\/\/www.olx.in\/nf\/cat-CATEGORY\/KEYWORDS","dynamicSearch":"http:\/\/www.olx.in\/nf\/search\/KEYWORDS"}); //]]></script><!-- End JsEnqueuer --> </body> </html>
这篇关于使用Jquery或CSS显示具有子类别的类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
