启用最后一个孩子<a> link click for a nested menu with parents set with preventDefault();

Question

I have tried a variety of methods with no luck. In my navigation menu, I want to achieve the following:

1. Clicking on li.menu-item should open subsequent sub menu (achieved by adding CSS class "open-sub-nav"). I have no issues with this.
2. Clicking on the last li.menu-item should visit the page. I mean, link should be clickable (stop e.preventDefault()). I don't know why the below jQuery didn't work for this.

After hours of trials, am I missing something in my code?

Please see the below navigation menu structure. The last li.menu-item child has no div.mobile-submenu child. Thus, clicking on Third level menu item should visit https://stackoverflow.com。

我尝试了以下jQuery方法：

＆＃13;

＆＃13;

$("li.menu-item").on('click', function(e) {
  if ($(this).children(".mobile-submenu").length > 0) {
    $(this).children(".mobile-submenu").addClass("open-sub-nav");
    return false;
  }
});

＆＃13;

 .mobile-submenu {
     position: fixed;
     top: 0;
     left: 0;
     width: 80%;
     height: 100%;
     background-color: #fff;
     -webkit-transform: translateX(-100%);
     -ms-transform: translateX(-100%);
     transform: translateX(-100%);
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
}
 .open-sub-nav {
     -webkit-transform: translateX(0%);
     -ms-transform: translateX(0%);
     transform: translateX(0%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mobile-menu">
  <li class="menu-item">
    <a href="https://stackoverflow.com"><span>First level menu Item</span></a>
    <div class="mobile-submenu">
      <ul class="submenu-items">
        <li class="menu-item">
          <a href="https://stackoverflow.com"><span>Second level menu item</span></a>
          <div class="mobile-submenu">
            <ul class="submenu-items">
              <li class="menu-item">
                <a href="https://stackoverflow.com"><span>Third level menu item</span></a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

$("li.menu-item:has(div.mobile-submenu)").click(function(e) {
  $(this).children("div.mobile-submenu").addClass("open-sub-nav");
  e.stopPropagation();
  e.preventDefault();

});

＆＃13;

 .mobile-submenu {
     position: fixed;
     top: 0;
     left: 0;
     width: 80%;
     height: 100%;
     background-color: #fff;
     -webkit-transform: translateX(-100%);
     -ms-transform: translateX(-100%);
     transform: translateX(-100%);
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
}
 .open-sub-nav {
     -webkit-transform: translateX(0%);
     -ms-transform: translateX(0%);
     transform: translateX(0%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mobile-menu">
  <li class="menu-item">
    <a href="https://stackoverflow.com"><span>First level menu item</span></a>
    <div class="mobile-submenu">
      <ul class="submenu-items">
        <li class="menu-item">
          <a href="https://stackoverflow.com"><span>Second level menu item</span></a>
          <div class="mobile-submenu">
            <ul class="submenu-items">
              <li class="menu-item">
                <a href="https://stackoverflow.com"><span>Third level menu item</span></a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我现在好。在重新措辞我的研究关键词后，我在Prevent default on link if parent hasClass()

上找到了类似的问题

我根据这个编辑了我的jQuery：

＆＃13;

＆＃13;

$("a").click(function(e) {
if ($(this).siblings().hasClass("mobile-submenu")) {
  $(this).siblings("div.mobile-submenu").addClass("open-sub-nav");
  e.preventDefault();
}
});

＆＃13;

 .mobile-submenu {
     position: fixed;
     top: 0;
     left: 0;
     width: 80%;
     height: 100%;
     background-color: #fff;
     -webkit-transform: translateX(-100%);
     -ms-transform: translateX(-100%);
     transform: translateX(-100%);
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     -o-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
}
 .open-sub-nav {
     -webkit-transform: translateX(0%);
     -ms-transform: translateX(0%);
     transform: translateX(0%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mobile-menu">
  <li class="menu-item">
    <a href="https://stackoverflow.com"><span>First level menu Item</span></a>
    <div class="mobile-submenu">
      <ul class="submenu-items">
        <li class="menu-item">
          <a href="https://stackoverflow.com"><span>Second level menu item</span></a>
          <div class="mobile-submenu">
            <ul class="submenu-items">
              <li class="menu-item">
                <a href="https://stackoverflow.com"><span>Third level menu item</span></a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;