手风琴菜单父项转到超链接而不是展开

Question

我正在使用jQuery脚本来生成手风琴菜单。它工作得很好，除非父元素有超链接，在这种情况下，点击它会将用户带到超链接，而不是展开菜单以显示子元素。任何想法如何解决下面的代码来解决这个问题？

jQuery脚本：

$(document).ready(function() { 
     $('.menu li').each(function() { 
       if($(this).children('ul').length > 0) { 
         $(this).addClass('parent');  
       } 
     }); 

     $('.menu li.parent > a').click(function() { 
       $(this).parent().toggleClass('active'); 
       $(this).parent().children('ul').slideToggle('fast'); 
     }); 

     $('#all').click(function() { 

      $('.menu li').each(function() { 
       $(this).toggleClass('active'); 
       $(this).children('ul').slideToggle('fast'); 
      }); 
     }); 

}); 

HTML标记：

<div class="menu"> 
    <ul> 
     <li><a href="http://www.google.com">Menu item 1</a> 
      <ul> 
       <li><a>Menu item 1.1</a></li> 
       <li><a>Menu item 1.2</a> 
        <ul> 
         <li><a>Menu item 1.2.1</a></li> 
         <li><a>Menu item 1.2.2</a></li> 
         <li><a>Menu item 1.2.3</a></li> 
        </ul> 
       </li> 
       <li><a>Menu item 1.3</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

CSS：

a 
    { 
     cursor: pointer; 
    } 

.menu ul 
    { 
     list-style: none outside none; 
    } 

.menu li a 
    { 
     line-height: 25px; 
    } 

.menu > ul > li > a 
    { 
     color: #3B4C56; 
     display: block; 
     font-weight: normal; 
     position: relative; 
     text-decoration: none; 
    } 

.menu li.parent > a 
    { 
     padding: 0 0 0 28px; 
    } 

.menu li.parent > a:before 
    { 
     background-image: url("../images/plus_minus_icons.png"); 
     background-position: 25px center; 
     content: ""; 
     display: block; 
     height: 21px; 
     left: 0; 
     position: absolute; 
     top: 2px; 
     vertical-align: middle; 
     width: 23px; 
    } 

.menu ul li.active > a:before 
    { 
     background-position: 0 center; 
    } 

.menu ul li ul 
    { 
     border-left: 1px solid #D9DADB; 
     display: none; 
     margin: 0 0 0 12px; 
     overflow: hidden; 
     padding: 0 0 0 25px; 
    } 

.menu ul li ul li 
    { 
     position: relative; 
    } 

.menu ul li ul li:before 
    { 
     border-bottom: 1px dashed #E2E2E3; 
     content: ""; 
     left: -20px; 
     position: absolute; 
     top: 12px; 
     width: 15px; 
    } 

Answer 1

如果该链接不应该是点击你可以尝试事端这样的：

$('.menu li.parent > a').click(function(event) { 
     event.preventDefault(); //this prevent the Link from redirecting 
     $(this).parent().toggleClass('active'); 
     $(this).parent().children('ul').slideToggle('fast'); 
}); 

如果重定向应该还是工作，则添加

window.location.href = $(this).attr('href'); 

你扩大后手风琴。

Answer 2

使用event.preventDefault()在点击事件。

从文档：

例如，点击锚不会采取浏览器到一个新的URL。

http://api.jquery.com/event.preventdefault/

Answer 3

您需要做的是防止使用event.preventDefault（）触发锚点的默认操作。

$('.menu li.parent > a').click(function(event) { 
    event.preventDefault(); 

    $(this).parent().toggleClass('active'); 
    $(this).parent().children('ul').slideToggle('fast'); 
});