Question

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

此处，当用户点击“Parent”时，想要使用带有url的锚标记显示“Admin”和“Account”。它一直工作到这一点。

如果用户点击“管理员”，则会折叠并显示根元素“父级”。

如何在这里举行结构。

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

如果没有锚标记，它将正常工作，但是当我将锚标记包含在网址中时，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

据我所知，你点击＆＃34; Admin＆＃34;或者＆＃34;帐户＆＃34;，它将重定向到相应的页面，并且当您想要打开它所在的层次结构时。

在这种情况下，您可以做的是，将当前网址与层次结构中的每个标记进行比较，并比较网址。 window.location.pathname可用于获取要比较的路径，each可循环显示a标记。如果您对此仍有疑问，请告诉我。

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

4 个答案: