如何使用带有href的锚标记控制切换

Question

我正在使用左侧菜单中的Jquery进行折叠和展开功能。

在这里，当用户单击“父项”时，要显示带有网址的锚标记的“管理员”和“帐户”。 到目前为止，一切正常。

如果用户单击“管理员”，它将崩溃并显示根元素“父对象”。

如何在这里固定结构。

$(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中包含锚标记时，li上的“ stopPropagation”事件将失败。 这使其折叠到根元素。

如果用户单击“管理员”，它将以以下形式折叠到根目录

.Parent

如何保持结构如下

.Parent
  .Admin
  .Account

Answer 1

尝试类似

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

 $(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时，您之前单击了父li。

Answer 3

好吧，下面是它的工作代码。

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

希望这对您有帮助：)

Answer 4

据我所知，您单击“管理员”或“帐户”，它将重定向到相应的页面，并且在您要打开其所在的层次结构时。

在这种情况下，您可以做的是，将当前网址与层次结构中的每个标记进行比较，然后比较该网址。 window.location.pathname可以用来获取要比较的路径，并且每个路径都可以循环通过a标记。 如果您还有疑问，请告诉我。