javascript - 仅当子菜单处于事件状态时才跟随超链接

Question

我整晚都在尝试让 .sidebar-menu li a 充当目标超链接，但不幸的是它仍在激活子菜单。我尝试使用下面的 javascript 使其成为目标链接但没有成功。我在这里错过了什么吗？ P.S.:该代码适用于移动平台。

<script>
        $('.sidebar-menu li a').click(function(e){
    if(!$(this).parent().hasClass('submenu-active')) {
        $('.sidebar-menu li').removeClass('submenu-active');
        $(this).parent().addClass('submenu-active');
        e.preventDefault();
    } else {
        return true;
    }
});</script>

<ul class="sidebar-menu">
  <li>
   	<a href="best-practice.htm" class="show-submenu">Best Practice<i class="fa fa-last fa-caret-right"></i>
    </a>
	<ul class="submenu">
      <li><a href="best-practice.htm#tab1">Cement &amp; Process<i class="fa fa-last fa-circle"></i></a>
      </li> 
    </ul>                
  </li>
</ul>

Answer 1

如果我理解正确(完整示例 http://codepen.io/kvic2/pen/rOVJVL)

首先为 show-submenu 类呈现没有 href 属性的 HTML，而是使用 data-href 属性:

<ul class="sidebar-menu">
  <li>
    <a data-href="best-practice.htm" class="show-submenu">Best Practice<i class="fa fa-last fa-caret-right"></i>
    </a>
    <ul class="submenu">
      <li><a href="best-practice.htm#tab1">Cement &amp; Process<i class="fa fa-last fa-circle"></i></a>
      </li> 
    </ul>                
  </li>
</ul>

CSS:

.show-submenu{ cursor: pointer; }

.submenu{ display: none; }

脚本

单击添加属性 href 并将其值设置为 data-href 属性值。显示子菜单:

$(function(){
  $('.show-submenu').click(function(e){    
    e.preventDefault();
    $(this).unbind('click');
    $('.submenu').show();
    $(this).attr('href', $(this).attr('data-href')).attr('target', '_blank');    
  });
});

更新

已修改 example将关闭按钮添加到子菜单项

<ul class="sidebar-menu">
  <li>
    <a href="best-practice.htm" target="_blank" class="show-submenu">Best Practice<i class="fa fa-last fa-caret-right"></i>
    </a>
    <ul class="submenu">
    <li><span class="close">(close)</span><a href="best-practice.htm#tab1">Cement &amp; Process<i class="fa fa-last fa-circle"></i></a>
      </li> 
    </ul>                
  </li>
</ul>

CSS

.show-submenu{
  cursor: pointer;
}

.submenu{
  display: none;
}

.close{
  cursor: pointer;
}

脚本

$(function(){
  $('.show-submenu').click(function(e){    
    if ($(this).next('.submenu:visible').length){
      console.log('sub menu is visible - open new tab');      
      return true;      
    }    
    console.log('sub menu is hidden - show it');
    e.preventDefault();    
    $('.submenu').show();    
  });

  $('.close').click(function(){
    $(this).parents('.submenu').hide();
  });
});