HTML
<div style="border:1px solid red;width:200px;">
<div class="wpsc_categorisation_group">
<ul class="wpsc_categories wpsc_top_level_categories">
<li><a href="link1">main link 1</a>
<ul>
<li><a>test 1</a></li>
<li><a>test 2</a></li>
<li><a>test 3</a></li>
</ul>
</li>
</ul>
<div class="clear_category_group"></div>
</div>
<div class="wpsc_categorisation_group">
<ul class="wpsc_categories wpsc_top_level_categories">
<li><a href="link2">main link 2</a>
<ul>
<li><a>test 1</a></li>
<li><a>test 2</a></li>
<li><a>test 3</a></li>
</ul>
</li>
</ul>
<div class="clear_category_group"></div>
</div>
</div>
CSS
div.wpsc_categorisation_group ul li {position:relative;}
div.wpsc_categorisation_group ul li ul {display:none;}
ul.wpsc_top_level_categories {padding-bottom:0 !important;}
ul.wpsc_top_level_categories li {}
ul.wpsc_top_level_categories li:hover {cursor:pointer;}
ul.wpsc_top_level_categories li ul li a span {background:none !important;}
span.collapse-arrow {background:red;width:10px;height:9px;float:right;margin-top:5px;}
Javascript
jQuery('div.wpsc_categorisation_group ul li ul').slideUp().hide();
jQuery('div.wpsc_categorisation_group ul li').click(function() {
jQuery(this).parent().find('ul').slideToggle();
});
jQuery('div.wpsc_categorisation_group ul li a').append('<span class="collapse-arrow"> </span>');
这是我的 jsfidlle示例
我真的需要这方面的帮助...
- 我只需要红色框是可点击的,并且潜艇会向下滑动
- 并且还需要它记住用户是打开还是关闭它,因此在更改页面时它会记住它的状态
- 并且不应该更改 HTML,因为我正在 wpsc 小部件中进行编辑
我真的很感谢我能得到的任何帮助...... :-(