0

jquery スライド メニューを機能させようとしていますが、今はアイデアがありません。サブメニュー エントリをクリックしたときにメニューが折りたたまれないようにするにはどうすればよいですか?

これが私がこれまでに得たものです-js部分、ナビゲーションコード、そして最後に関連するcss部分：

    <script type="text/javascript">
        $(document).ready(function() {
         $('ul .sub').hide();
         $("li:has(.sub)").click(function() {
            $("ul", this).toggle('slow');
        });
    </script>

    <nav id="nav" class="nav">
        <ul>
            <li class="current"><a href="#a">menu1</a></li>
            <li><a href="#b">menu2</a>
                <ul class="sub">
                    <li><a href="#ba">sub2a</a></li>
                    <li><a href="#bb">sub2b</a></li>
                    <li><a href="#bc">sub2c</a></li>
                </ul>
            </li>
            <li><a href="#c">menu3</a></li>
            <li><a href="#d">menu4</a>
                <ul class="sub">
                    <li><a href="#da">sub4a/a></li>
                        <li><a href="#db">sub4b</a></li>
                </ul>
            </li>
        </ul>
    </nav>

そして、ここにcssがあります：

 .nav li {
    list-style:none;
    line-height: 30px;  
 }

 .nav a:link, .nav a:visited{
    color:#333 !important;
    text-decoration:none;
 }

 .nav a:hover {
    color:#9bb710;
    text-decoration:none;
 }

 .current a:link, .current a:hover, .current a:visited {
    color:#9bb710 !important;
 }

 .sub {
    color:#333 !important;
    text-decoration:none;
    font-size: 14px;
    margin-left: 15px;
    line-height: 22px;
 }
4

3 に答える 3

2

これは、イベントの伝播が原因で発生しています。サブアイテムをクリックすると、「クリック」イベントがコンテナ「li」まで伝播されます。

これを防ぐには、次を追加します。

$("li").click(function(event) {
    event.stopPropagation();
});

jsfiddle の例を次に示します: http://jsfiddle.net/EWXPy/

于 2013-06-07T08:27:13.903 に答える
1

スクリプトで閉じ括弧を忘れました:

次のようにする必要があります。

<script type="text/javascript">
        $(document).ready(function() {
         $('ul .sub').hide();
         $("li:has(.sub)").click(function() {
            $("ul", this).toggle('slow');
        });
});
</script>
于 2013-06-07T08:24:39.783 に答える
0 
$("li:has(.sub)").click(function(e) {
    if ($(e.target).parents('.sub').length) return false;

    $("ul", this).toggle('slow');
});
于 2013-06-07T08:20:41.800 に答える