1

我在侧边栏中设置了一个标准的垂直 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();
 });
4

0 回答 0