通过避开上级菜单的链接，在点击时显示隐藏的子菜单。

Question

我正在做一个项目，最糟糕的是我不能编辑项目的HTML代码。我只能编辑CSSJavaScript。我的项目是，我有一个菜单列表，使用了 <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代码，我只能编辑或添加CSSJavaScript。我只能编辑或添加CSSJavaScript。这里我想隐藏所有的 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')

演示

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

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

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

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