jquery - 单击展开导航菜单

Question

我有一个菜单，除了我无法使用 JQuery 单击打开它之外，它工作正常。这在悬停时工作正常，但我也希望在手机和平​​板电脑上单击时打开菜单。我可能在做一些愚蠢的事情，但无法弄清楚问题是什么。我附上了一个工作示例和下面的 fiddle :

https://jsfiddle.net/qby38c3o/6/

HTML:

<div class="nav">
<div class ="navWrapper">
<nav role="navigation" class="menu">  
    <ul class="navList">
        <li><a href="#">NavMenu1</a></li>
        <li><a href="#">NavMenu2</a></li>
        <li>
        <a href="#">NavMenu4</a>
            <ul class="submenu">
                <li><a href="#">Sub1</a></li>
                <li><a href="#">Sub2</a></li>
                <li><a href="#">Sub3</a></li>
                <li><a href="#">Sub4</a>
                    <ul class="subSubmenu">
                        <li><a href="#">SubSub1</a></li>
                        <li><a href="#">SubSub2</a></li>
                    </ul>
                </li>
            </ul>
        </li> 
    </ul>
</nav>
</div>
</div>

CSS:

.nav
{
    background-color: blue;
    z-index: 1;
}

.navWrapper
{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    flex-grow: 1;
    max-width: 1366px;
    width:100%;
    margin:auto;
}

/*HORIZONTAL MENU*/
.menu
{
    flex-grow: 1;
    width: 100%;
}

.menu ul.navList
{
    display:flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
}

.menu ul li
{
    position: relative;
}

.menu > ul > li > a
{
    text-align: left;
    display:block;
    color: white;
    padding:16px 16px 12px 16px;
    border-bottom:4px solid transparent; /*To offset white underline hover*/
    font-weight: 700;
}

.menu > ul > li a:hover
{
    background-color: red;
    border-bottom: 4px solid #F1F227;
    color: white;
    transition: 1s ease-out;
}

/*Sub Menu*/
.menu > ul > li:hover > ul
{
    display: block;
}

.submenu
{
    display:none;
    position:absolute;
    background-color: blue;
    white-space: nowrap;
    min-width : 100%;
    list-style-type: none;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
}

.submenu > li > a
{
    text-align: left;
    display:block;
    color: #fff;
    padding:16px 16px 12px 26px;
    border-bottom:4px solid transparent; /*To offset white underline hover*/
    font-weight: 500;
}

.submenu > li:hover > a
{
  background-color: #062c6b;
  color: #FFDB00;
  border-bottom: 4px solid #F1F227;
  transition: 1s ease-out;
}

/*Child Sub Menu*/
.menu > ul > li > ul > li:hover > ul 
{
    display: block;
}

.subSubmenu
{
    display:none;
    position:absolute;
    background-color: blue;
    white-space: nowrap;
    min-width: 100%;
    list-style-type: none;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
    left: 100%;
    top: 0;
    bottom:auto;
}

.subSubmenu > li > a
{
    text-align: left;
    display:block;
    color: #fff;
    padding:19px 16px 12px 36px;
    border-bottom:4px solid transparent; /*To offset white underline hover*/
    font-weight: 300;
}

.menu > ul > li > ul > li:hover > ul > li:hover > a
{
  background-color: red;
  color: #C5EFF7;
  border-bottom: 4px solid #F1F227;
  transition: 1s ease-out;
}

JQuery:

jQuery(document).ready(function () {
clickNav();
activeNav()

function activeNav(e) {
var url = window.location.href;
$(".menu ul li a").each(function () {
if (url == (this.href)) {
$(this).closest("li").addClass("active");
}
});

e.preventDefault();
}

function clickNav(e) {
var submenu = $(this).children('.submenu');
$('.menu ul .submenu').parent().click(function () {
if ($(submenu).is(':hidden')) {
$(submenu).slideDown(200);
} else {
$(submenu).slideUp(200);
}
});

e.preventDefault();
        }
});

Answer 1

您的代码中有一些错误。

1) 你忘记在你的 fiddle 中包含 jQuery。您需要在此处包含它:

2) e.preventDefault(); 在代码中的位置错误；它在您的 document.ready 函数中，而不是 click 函数中。

3) 不要将 submenu 定义为变量，只需使用 $(this)。

4) 您的 e(来自 e.preventDefault())定义在错误的位置。

这应该有效:

jQuery(document).ready(function () {
    clickNav();

    function clickNav() {
            $('.menu ul .submenu').parent().click(function (e) {
            if ($(this).children('.submenu').is(':hidden')) {
                $(this).children('.submenu').slideDown(200);
            } else {
                $(this).children('.submenu').slideUp(200);
            }

            e.preventDefault();
        });
    }
});

这是一个fiddle .