如何使用href控制帶錨標記的切換

Question

我正在使用左側菜單中的Jquery的Collapse和Expand功能。

在這裏，當用戶點擊「父」，想顯示「管理員」和「帳戶」與錨標記與網址。在這一點上它工作得很好。

如果用戶點擊「管理員」，它將摺疊並顯示根元素「Parent」。

如何保持這裏的結構。

$(document).ready(function() { 
    $('ul.child').hide(); 

    $('li:has(.child)').click(function() { 
     $('ul',this).toggle('slow'); 
    }); 

    $('li').click(function(event) { 
     event.stopPropagation(); 
    }); 

<nav id="nav"> 
    <ul> 
     <li> 
      <a>Parent</a> 
      <ul class-"child"> 
       <li class="child"><a href="/Home/Admin">Admin</a></li> 
       <li class="child"><a href="/Home/Account">Account</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

沒有一個錨標記它會正常工作，但是當我包括與鏈接的錨標記，「stopPropagation」事件在李會失敗。這使它崩潰到根元素。

如果管理員用戶點擊它會崩潰到根作爲

.Parent 

怎樣做才能保持結構如下圖

.Parent 
    .Admin 
    .Account 

Answer 1

據我得到，你點擊 「管理」 或 「賬戶」，它會重定向到適當的頁面，並在您想要打開它所在的層次時。

在這種情況下，您可以做的是，將當前網址與層次結構中的每個標記進行比較並比較網址。可以使用window.location.pathname來獲取要比較的路徑，並使用each來循環顯示a標籤。讓我知道你是否仍然懷疑它。

Answer 2

試着這麼做

$('div.toggle').hide(); 
$('ul.product-info li a').click(function(event) { 
    event.preventDefault(); 
    $(this).next('div').slideToggle(200); 
}); 

這裏是關於jQuery文檔中的頁面：

http://learn.jquery.com/events/event-basics/#preventdefault

Answer 3

$(document).ready(function() { 
 
    $('ul.child').hide(); 
 

 
    $('.parent').click(function() { 
 
     $('ul.child',this.parent).toggle('slow'); 
 
    }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="nav"> 
 
    <ul> 
 
     <li> 
 
      <a class="parent">Parent</a> 
 
      <ul class="child"> 
 
       <li><a href="#/Home/Admin">Admin</a></li> 
 
       <li><a href="#/Home/Account">Account</a></li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav>

這應該工作。 你的問題是，當你點擊李你點擊父李之前。

Answer 4

那麼，下面是它的工作代碼。

$(document).ready(function() { 
 
    $('ul.child').hide(); 
 

 
    $('li:has(.child)').click(function() { 
 
     $('ul',this).toggle('slow'); 
 
    }); 
 

 
    $('li').click(function(event) { 
 
     event.stopPropagation(); 
 
    }); 
 
    
 
    });

a{ 
 
    color: blue; 
 
    text-decoration: none; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="nav"> 
 
    <ul> 
 
     <li> 
 
      <a>Parent</a> 
 
      <ul class="child"> 
 
       <li class="child"><a href="/Home/Admin">Admin</a></li> 
 
       <li class="child"><a href="/Home/Account">Account</a></li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav>

希望這將幫助你:)