Javascript 通过避免父菜单的链接，在单击时显示隐藏的子菜单

我正在从事一个项目，其中最糟糕的是我不能编辑我的项目的HTML代码。我只能编辑CSS/JavaScript。我的项目是，我有一个菜单列表，使用

..

也有子列表。完整的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。在这里，我想隐藏所有

子菜单

并在单击父菜单时显示。但当我们点击父菜单时，它就会转到父菜单上的外部链接。那么，有什么办法或解决办法

更新：

---

请记住，我还希望父菜单链接也能工作。我有一个想法，在父菜单前面添加一些文本，比如

show/hide

，并制作一些JavaScript来打开它的子菜单，在这种情况下，如果我们直接点击它，父菜单链接也会起作用。现在我们可以使用JavaScript在父菜单前面添加一些文本/图标，因为我无法编辑HTML吗？

通过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
    })
})

$（文档）.ready（函数（）{
$.each（'.parent'，function（）{
$（this.prepend（“”）；
})
$（文档）.on（'click'，'.clickableBox'，函数（事件）{
//在此处显示/隐藏逻辑
})
})

因为我看不到完整的HTML，所以我的行为就像

main\u 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）

将不执行任何操作

您的单击功能：

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

$（文档）.ready（函数）{
$（'.main_list.parent'）.prepend（'Show'）；
});

然后，上面单击处理程序中的选择器将是：

$（'.show'）

---

根据我上面的评论

在带有子菜单项的菜单项旁边附加一个下拉箭头-单击父项将导航到其链接，但单击箭头将打开子菜单

CSS:

JQUERY：

$(function(){
    $('li.parent').each(function(){
        $(this).children('a').after('<img src="http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png" />');
    });

    $('li.parent img').on("click",function(){
        $(this).siblings('ul.children').toggle();
    });
});

以下内容适合我：）

---

让子菜单显示在

：悬停
？如果这不是一个可行的解决方案，请创建一个JSFIDLE，以便我们可以使用它。
event.preventDefault（）-function@Rvervuurt是的，我可以用
：hover
来处理它，但我想在单击后让它保持打开状态。@empiric我也希望父菜单链接也能工作…：（打开菜单和保持父链接工作似乎是相互矛盾的目标。如果单击菜单项打开子菜单，则父链接不应工作（否则浏览器将在用户可以与子菜单交互之前离开页面）。您可以在包含子项的菜单项旁边附加某种下拉箭头-单击父项将导航到其链接，但单击箭头将打开子菜单。在这种情况下，您应该在.parent类元素之前或之后添加一个div框，并在用户单击该广告时执行显示/隐藏元素ded框。因此我现在将更新我的答案
$。这里不需要每个
，如
[…]中所述到匹配元素集中每个元素的开头
yes，您可以在不使用每个函数的情况下获得您的功能。这是fiddle@eXpas yes。您的fiddle是正确的，但所选答案中有一个具有更多功能。您也可以选择其他选项……您不能单击并使其不工作，然后在不修改HTML的情况下工作。@MuhammadHassan我在回答中添加了I fiddle是的，您可以通过
.addClass（）
向元素添加多个类。要在链接后添加文本，可以使用
.append（）
而不是
.prepend（））
您的代码也符合我的要求。您是否可以在“切换单击”中更改箭头图像以使其看起来更棒…？？是的，您只需在“单击”功能中切换箭头图像。查看（我也会将其添加到上面的答案中）。很酷。您共享了另一个答案，但StackOverFlow只有一个选项可供选择。其他人投票支持您…）
$(function(){
    $('li.parent').each(function(){
        $(this).children('a').after('<img src="http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png" />');
    });

    $('li.parent img').on("click",function(){
        $(this).siblings('ul.children').toggle();
    });
});

$('li.parent img').on("click",function(){
    if($(this).hasClass('open')) {
        $(this).removeClass('open');
        $(this).attr('src','Arrow-down.png');
    } else {
        $(this).addClass('open');
        $(this).attr('src','Arrow-up.png');
    }
    $(this).siblings('ul.children').toggle();
});

jQuery(function( $ ){
 $(document).ready(function(){
  $('.main_list a').click(function (e) {
    if ($(this).parent().children('ul').is(':visible') != true) {
        $(this).parent().children('ul').show();
        e.preventDefault();
        return false;
     }
   })
  });
});