Question

我在侧边栏中设置了标准的垂直jquery手风琴菜单，它工作正常。当您单击包含子菜单的链接时，它会展开并显示子菜单。

我想要做的是让列表项在点击时展开菜单，但是列表项中的文本链接会将您带到新页面。我以前见过一些例子，但现在很难找到一个例子。

我已经搜索了一段时间并且没有在任何地方找到答案。任何帮助将不胜感激。

HTML

<ul id="nav">
<li class="arrow"><a href="#">Level 1 Link</a>
    <ul>
        <li><a href="#">Level 2 Link</a></li>
        <li><a href="#">Level 2 Link</a></li>
        <li class="arrow"><a href="#">Level 2 Link (selected)</a>
            <ul>
                <li><a href="#">Level 3 Link</a></li>
                <li><a href="#">Level 3 Link</a></li>
                <li class="arrow"><a href="#">Level 3 Link (selected)</a>
                    <ul>
                        <li><a href="#">Level 4 Link</a></li>
                        <li><a href="#">Level 4 Link</a></li>
                        <li><a href="#">Level 4 Link</a></li>
                        <li><a href="#">Level 4 Link</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="#">Level 1 Link</a></li>
<li><a href="#">Level 1 Link</a></li>
<li class="arrow"><a href="#">Level 1 Link (selected)</a>
    <ul>
        <li><a href="#">Level 2 Link</a></li>
        <li><a href="#">Level 2 Link</a></li>
        <li class="arrow"><a href="#">Level 2 Link (selected)</a>
            <ul>
                <li><a href="#">Level 3 Link</a></li>
                <li><a href="#">Level 3 Link</a></li>
                <li class="arrow"><a href="#">Level 3 Link (selected)</a>
                    <ul>
                        <li><a href="#">Level 4 Link</a></li>
                        <li><a href="#">Level 4 Link</a></li>
                        <li><a href="#">Level 4 Link</a></li>
                        <li><a href="#">Level 4 Link</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="#">Level 1 Link</a></li>
<li><a href="#">Level 1 Link</a></li>
<li><a href="#">Level 1 Link</a></li>

的jQuery

$('#nav > li.arrow').click(function(e){
 if ($(this).attr('class') != 'active'){
   $('#nav li ul').slideUp();
   $(this).next().slideToggle();
   $('#nav li.arrow').removeClass('active');
   $(this).addClass('active');
 }
 e.preventDefault();
 });
 $('#nav > li > ul > li.arrow').click(function(e){
  if ($(this).attr('class') != 'active'){
   $('#nav li ul li ul').slideUp();
   $(this).next().slideToggle();
   $('#nav li ul li.arrow').removeClass('active');
   $(this).addClass('active');
 }
 e.preventDefault();
 });
 $('#nav > li > ul > li > ul > li.arrow').click(function(e){
  if ($(this).attr('class') != 'active'){
   $('#nav li ul li ul li ul').slideUp();
   $(this).next().slideToggle();
   $('#nav li ul li ul li.arrow').removeClass('active');
   $(this).addClass('active');
 }
 e.preventDefault();
 });

带有切换按钮和文本链接的jQuery垂直手风琴菜单

0 个答案: