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

通过JavaScript Cach你的父点击事件，然后使用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 2

您的点击功能：

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

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

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

5 个答案: