Question

我有一个工作正常的菜单，除了我无法使用JQuery点击打开它。这在悬停时工作正常，但我也想要点击手机和平板电脑打开菜单。我可能做了一些愚蠢的事情，但无法解决问题所在。我附上了一个工作示例和下面的小提琴：

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）你忘了在你的小提琴中加入jQuery。在这里您需要包含它：

2）e.preventDefault();在您的代码中位置错误;它在你的document.ready函数中，而不是点击功能。

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。

单击“展开导航”菜单

1 个答案: