Как управлять переключением с тегом привязки с помощью href

Question

Я работаю над функцией Collapse и Expand, используя JQuery в своем левом меню.

Здесь, когда пользователь нажимает «Родительский», хотел бы показать «Admin» и «Account» с тегом привязки с URL-адресом. До этого момента он работает нормально.

Если пользователь нажимает «Admin», он рушится и показывает корневой элемент «Родитель».

Как сохранить структуру здесь.

$(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> 

Без тега привязки он будет работать нормально, но когда я включаю якорь тег с URL, «stopPropagation» событие над литий потерпит неудачу. Это заставляет его рушиться на корневой элемент.

Если пользователь нажимает на администратора он будет разрушаться в корень, как

.Parent 

что делать, чтобы держать структуру, как показано ниже

.Parent 
    .Admin 
    .Account 

Answer 1

Насколько я получаю, вы нажимаете на "Admin" или "счет", он будет перенаправлять на соответствующую страницу и в то время, когда вы хотите открыть иерархию, в которой она находится.

В этом случае, что вы можете сделать, сравните текущий URL-адрес с каждым тегом в иерархии и сравните URL-адрес. window.location.pathname можно использовать для получения пути, который вы хотите сравнить, и each для прокрутки тегов. Дайте мне знать, если вы все еще сомневаетесь в этом.

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>

Это должно работать. Ваша проблема в том, что когда вы нажимаете на li, вы нажимали на родительский ли раньше.

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>

Надеясь это поможет :)