0

以下のスクリプトは、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>
4

3 に答える 3

0

preventDefaultを使用して、リンクがたどられないようにします。

.click(function(e) {
    if (this == e.target) {
        $(this).children('ul').slideToggle('fast');
    }
    e.preventDefault();
});
于 2012-06-19T17:14:54.283 に答える
0

私はあなたのコードをクリーンアップしました：

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/

于 2012-06-19T17:21:51.267 に答える
0

これをチェックしている理由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');
   });
});
于 2012-06-19T17:22:26.300 に答える