Question

如果3和3.2不是链接，下面的脚本可以正常工作，但我不知道如何在链接时让它工作。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - Test</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>

<style>
ul{
list-style-type: none;
padding: 0;
margin-left: 0;
font-weight: bold;
}
</style>





<script type='text/javascript'>

$(document).ready(function() {
    $("#nav ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
    .click(function(e) {
        if (this == e.target) {
            $(this).children('ul').slideToggle('fast');
        }
    });
});


</script>


</head>
<body>
  <div id="nav">
    <ul>
        <li><a href="javascript:void(0)">1</a></li>
        <li><a href="javascript:void(0)">2</a></li>
        <li><a href="javascript:void(0)">3</a>
            <ul>
                <li><a href="example.com">3.1</a></li>
                <li><a href="javascript:void(0)">3.2</a>
                    <ul>
                        <li><a href="example.com">3.2.1</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="javascript:void(0)">4</a></li>
    </ul>

</div>


</body>


</html>

Answer 1

使用 preventDefault 停止关注链接：

.click(function(e) {
    if (this == e.target) {
        $(this).children('ul').slideToggle('fast');
    }
    e.preventDefault();
});

Answer 2

我已经清理了你的代码：

HTML：

  <div id="nav">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a>
            <ul>
                <li><a href="example.com">3.1</a></li>
                <li><a href="#">3.2</a>
                    <ul>
                        <li><a href="example.com">3.2.1</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">4</a></li>
    </ul>

</div>

的CSS：

ul{
list-style-type: none;
padding: 0;
margin-left: 0;
font-weight: bold;
}

ul ul{
    display:none;
}

jQuery的：

$(document).ready(function() {
    $('#nav ul li a[href="#"]').click(function(event) {
        event.preventDefault();
        $(this).siblings('ul').toggle();
    });
});

演示：
http://jsfiddle.net/PvQVY/

Answer 3

为什么要检查 this == e.target ，请改为尝试

$(document).ready(function() {
   $("#nav ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
     .click(function(e) {
       e.preventDefault();
       $(this).children('ul').slideToggle('fast');
   });
});

slideToggle on link

3 个答案: