通过避免父菜单的链接显示隐藏的子菜单

Question

我正在做一个项目，最糟糕的是我无法编辑我的项目的 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 吗？

Answer 1

您的点击功能：

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

Demo

Answer 2

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

Answer 3

根据我上面的评论...

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

JSfiddle DEMO

CSS：

ul.children {
    display: none;
}

查询：

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

EDITED JQUERY（带箭头图像切换）：

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

Updated DEMO

Answer 4

由于我看不到完整的 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) 将不会执行任何操作。

Answer 5

以下对我有用:)

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