1

我正在建立一个带有左侧导航菜单的网站。我正在使用 JQuery 来隐藏菜单的子元素，并在父菜单元素上使用 preventDefault 方法来阻止 HTML 操作。但是，这会阻止 Home 和 Signout 的父菜单导航链接。有没有办法可以根据 html 元素 ID 或 event.Target 执行条件 preventDefault？

我的 JavaScript 代码：

$(function() {
    var menu_ul = $('.menu > li > ul'),
        menu_a  = $('.menu > li > a');
    menu_ul.hide();
    menu_a.click(function(e) {
            e.preventDefault();
        if(!$(this).hasClass('active')) {
            menu_a.removeClass('active');
            menu_ul.filter(':visible').slideUp('normal');
            $(this).addClass('active').next().stop(true,true).slideDown('normal');
        } else {
            $(this).removeClass('active');
            $(this).next().stop(true,true).slideUp('normal');
        }
    });
});

我的 HTML 代码：

<nav>
    <ul class="menu">
            <li class="item1"><a href="home.cfm">Home</a></li>
            <li class="item2"><a href="#">Parent Menu 2</a>
                <ul>
                        <li class="subitem1"><a href="Page2.cfm">Child Menu 1</a></li>
                        <li class="subitem2"><a href="Page3.cfm">Child Menu 2</a></li>
                    </ul>
            </li>
        <li class="item3"><a href="#">Parent Menu 3</a></li>
        <li class="item4"><a href="#">Parent Menu 4</a>
                 <ul>
                        <li class="subitem1"><a href="#">Child Menu 1</a></li>
                        <li class="subitem2"><a href="#">Child Menu 2</a></li>
                        <li class="subitem3"><a href="#">Child Menu 3</a></li>
                    </ul>
                </li>
            <li class="item5"><a href="#">Parent Menu 5</a>
                    <ul>
                        <li class="subitem1"><a href="#">Child Menu 1</a></li>
                        <li class="subitem2"><a href="#">Child Menu 2</a></li>
                        <li class="subitem3"><a href="#">Child Menu 3</a></li>
                    </ul>
            </li>
        <li class="item6"><a href="#signout">Signout</a></li>
        </ul>
</nav>

任何建议表示赞赏。谢谢你。

4

0 回答 0