jquery - トグルボタンとテキストリンクを備えたjQueryの垂直アコーディオンメニュー

Question

サイドバーに標準の垂直 jquery アコーディオン メニューを設定しましたが、正常に動作します。サブメニューを含むリンクをクリックすると、展開されてサブメニューが表示されます。

私がやりたいのは、クリックするとリスト項目がメニューを展開するようにすることですが、リスト項目内のテキストリンクで新しいページに移動できます。過去に例を見たことがありますが、今は例を見つけるのに苦労しています。

SOをしばらく検索しましたが、どこにも答えが見つかりませんでした。どんな助けでも大歓迎です。

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();
 });