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）

首先渲染HTML而不使用href类的show-submenu属性，而是使用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以将close - 按钮添加到子菜单项

<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();
  });
});

仅当子菜单处于活动状态时才关注超链接

1 个答案: