只有当子菜单处于活动状态时才跟随超链接
只有当子菜单处于活动状态时才跟随超链接
提问于 2015-09-08 13:45:48
我整晚都在努力使.侧栏菜单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 & Process<i class="fa fa-last fa-circle"></i></a>
</li>
</ul>
</li>
</ul>
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-09-08 14:39:59
如果我完全理解你的话(完整的样本http://codepen.io/kvic2/pen/rOVJVL)
首先，对于href类不使用show-submenu属性，而是使用data-href属性来呈现HTML：
<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 & Process<i class="fa fa-last fa-circle"></i></a>
</li>
</ul>
</li>
</ul>CSS:
.show-submenu{ cursor: pointer; }
.submenu{ display: none; }脚本
单击add属性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');
});
});更新
修改后的示例将close-button添加到子菜单项
<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 & 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();
});
});Stack Overflow用户
发布于 2015-09-08 14:04:55
你能试试这个吗？
$('.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 {
e.preventDefault();
window.location.href=$(this).attr('href');
}
})
基本上，只需手动提取href并将窗口重定向到href。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32459503
复制相关文章
相似问题
腾讯云开发者
