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

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