垂直手风琴jQuery的

Question

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 {} 
ul.wpsc_top_level_categories li ul li a span {background:none !important;} 
span.collapse-arrow {cursor:pointer;background:red;width:10px;height:9px;float:right;margin-top:5px;} 

jQuery的

$('div.wpsc_categorisation_group ul li ul').slideUp().hide(); 
$('.wpsc_categories').on('click', 'a', function(e) { 
    e.preventDefault(); // Prevent the Default Action 
    if (e.target.className == 'collapse-arrow') { // Trigger only 
                // If clicked on span 
     $(this).closest('ul').find('ul').slideToggle(); 
    } 

}); 
$('div.wpsc_categorisation_group ul li a').append('<span class="collapse-arrow">&nbsp;</span>'); 

这里是我的小提琴http://jsfiddle.net/nwbY7/23/

1. 只有红色方块可激活下拉滑盖
2. 链接应该重定向到URL（它不会去任何地方）
3. HTML结构不应该被改变

我真的很需要anyhelp的... :-(

Answer 1

您的点击事件处理程序阻止浏览器执行正常的操作< a> tags：转到新的URL。

e.preventDefault()正在解雇所有链接点击。如果您正在处理折叠箭头点击，您只需要这样做。这似乎为我工作有关的jsfiddle：

$('div.wpsc_categorisation_group ul li ul').slideUp().hide(); 
$('.wpsc_categories').on('click', 'a', function(e) { 

if (e.target.className == 'collapse-arrow') { // Trigger only 
               // If clicked on span 
    $(this).closest('ul').find('ul').slideToggle(); 
    e.preventDefault(); // Prevent the Default Action 
} 

}); 
$('div.wpsc_categorisation_group ul li a').append('<span class="collapse-arrow">&nbsp;</span>');​ 

注意我所做的就是移动e.preventDefault()到if块内。

Answer 2

感谢球员，我得到它的工作....唯一的问题是，我想要加号来改变减号时崩溃。

工作样本这里http://jsfiddle.net/nwbY7/25/

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 class="wpsc_second_level_categories"> 
       <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 class="wpsc_second_level_categories"> 
       <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

span.CatExpander {float:right;cursor:pointer;} 
.wpsc_second_level_categories {display:none;} 

的Javascript

//<![CDATA[ 
(function($) 
{ 
$(document).ready(function() 
{ 
$(".wpsc_top_level_categories > li:has(ul)").prepend("<span class=\"CatExpander\">[+]</span>"); 

$(".CatExpander").click(function() 
{ 
$(this).toggleClass("CatExpanded").siblings("ul").slideToggle(500); 
return false; 
}).eq(0).addClass("CatExpanded").end().slice(1).siblings("ul").hide(); 
}); 
})(jQuery); 
//]]>