避免父菜单链接显示隐藏子菜单OnClick
避免父菜单链接显示隐藏子菜单OnClick
提问于 2014-11-18 12:35:56
我正在做一个项目，最糟糕的是我不能编辑我的项目的HTML代码。我只能编辑CSS/JavaScript。我的项目是我有一个使用<ul><li>...的菜单列表，其中也有子列表。完整的HTML代码如下..。
<ul class="main_list">
<li class="parent">
<a href="##########">Menu-1</a>
<ul class="children">
<li><a href="##########">SubMenu-1</a></li>
<li><a href="##########">SubMenu-2</a></li>
<li><a href="##########">SubMenu-3</a></li>
</ul>
</li>
<li><a href="##########">Menu-2</a></li>
<li><a href="##########">Menu-3</a></li>
<li><a href="##########">Menu-4</a></li>
<li class="parent">
<a href="##########">Menu-5</a>
<ul class="children">
<li><a href="##########">SubMenu-1</a></li>
<li><a href="##########">SubMenu-2</a></li>
<li><a href="##########">SubMenu-3</a></li>
</ul>
</li>
</ul>这是我无法编辑的HTML代码。我只能编辑或添加CSS/JavaScript。在这里，我想隐藏所有的children菜单，并将显示在点击那里的父菜单。但是，当我们单击“父菜单”时，它会转到父菜单上的外部链接。有什么办法解决这个问题吗？
更新：要记住，我也希望父菜单链接也能工作。我有一个想法，在前面添加一些文本到父菜单，如show/hide，并使一些JavaScript打开它的子菜单，在本例中，父菜单链接也将工作，如果我们将直接点击它。现在，我们可以使用JavaScript在父菜单前面添加一些文本/图标，因为我不能编辑HTML？
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-11-18 12:51:47
您的点击功能：
$('.main_list .parent > a').on('click', function(event){
event.preventDefault();
var href = $(this).attr('href'); // save the href for further use
$(this).siblings('.children').show(); //or whatever show-function you want to use
window.location.href = href; //if you want to user to be redirected
//OR
window.open(href,'_blank'); //for opening a new tab
});对于你的第二个请求，你可以这样做：
$(document).ready(function{
$('.main_list .parent').prepend('<span class="show">Show</span>');
});那么上面单击处理程序中的选择器将是：
$('.show')
演示
Stack Overflow用户
发布于 2014-11-18 12:44:36
通过JavaScript缓存父级单击事件，然后使用event.preventDefault()停止重定向，然后可以创建一些逻辑来显示/隐藏菜单项。
$(document).ready(function(){
$.each('.parent', function(){
$(this).prepend('<div class="clickableBox"></div>');
})
$(document).on('click', '.clickableBox', function(event){
//show/hide logic here
})
})Stack Overflow用户
发布于 2014-11-18 12:47:54
因为我看不到完整的HTML，所以我表现得好像只有main_list。
// Get all anchors in menu
var anchors = document.getElementsByClassName('main_list')[0].getElementsByTagName('a');
// Change HREF to do nothing
for(a in anchors){
a.href = "javascript:void(0);
}
// Do other stuff在加载完所有内容后，让该代码在页面末尾运行。将href更改为javascript:void(0)将不会有任何操作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26994519
复制相关文章
相似问题
腾讯云开发者
