javascript - 双击子菜单设备

Question

我的问题有一些解决方案，但效果不佳。我想点击打开菜单的元素(+ 添加类(class)打开)，然后当我再次点击某处链接时。

$('.nav > ul > li').on('mouseenter', function() {
  $(this).addClass('open')
  console.log('mouseenter');
}).on('mouseleave', function() {
  $(this).removeClass('open')
})

$('.nav > ul > li > a').on('click', function(e) {
  var li = $(this).parent();
  console.log('click');
  if (!li.hasClass('open')) {
    li.addClass("open");
    e.preventDefault();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li><a href="link1.html">main1</a>
      <ul>
        <li><a href="link1.html">link1</a></li>
        <li><a href="link2.html">link2</a></li>
        <li><a href="link3.html">link3</a></li>
        <li><a href="link4.html">link4</a></li>
      </ul>
    </li>
    <li><a href="link2-1.html">main2</a>
      <ul>
        <li><a href="link2-1.html">link1</a></li>
        <li><a href="link2-2.html">link2</a></li>
        <li><a href="link2-3.html">link3</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

e.preventDefault(); 应该在函数的开头。

$('.nav > ul > li').on('mouseenter', function() {
  $(this).addClass('open')
  console.log('mouseenter');
}).on('mouseleave', function() {
  $(this).removeClass('open')
})

$('.nav > ul > li > a').on('click', function(e) {
  e.preventDefault();
  var li = $(this).parent();
  console.log('click');
  if (!li.hasClass('open')) {
    li.addClass("open");
    
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li><a href="link1.html">main1</a>
      <ul>
        <li><a href="link1.html">link1</a></li>
        <li><a href="link2.html">link2</a></li>
        <li><a href="link3.html">link3</a></li>
        <li><a href="link4.html">link4</a></li>
      </ul>
    </li>
    <li><a href="link2-1.html">main2</a>
      <ul>
        <li><a href="link2-1.html">link1</a></li>
        <li><a href="link2-2.html">link2</a></li>
        <li><a href="link2-3.html">link3</a></li>
      </ul>
    </li>
  </ul>
</div>