带有e.preventDefault（），e.​​stopPropagation（）的超级菜单slideUp和slideDown，停止内部锚点单击

Question

这是巨型菜单的一种设计，我希望它像手风琴一样工作，它现在正在做，但是问题在于内部锚点，现在无法单击。

$(document).ready(function() {
        $(".megaMenu > li").click(function(e) {
          if(e.target !== this){
            return false;
          }else {
            $(".megaMenu > li").not(this).find(".subMenu:first").slideUp();
            $(this).find(".subMenu:first").slideToggle();
            e.preventDefault();
            e.stopPropagation();
          }
        });
        $(".subMenu > li").click(function(e) {
          if(e.target !== this){
            return false;
          }else {
            $(".subMenu > li").not(this).find(".subMenu:first").slideUp();
            $(this).find(".subMenu:first").slideToggle();
            e.preventDefault();
            e.stopPropagation();
          }
        });
    });

.megaMenu {
        display: flex;
        flex-direction: column;
    }

    .megaMenu>li {
        margin: 10px 0;
        padding: 10px;
        background-color: #eaeaea;
        cursor: pointer;
    }

    .megaMenu .subMenu {
        display: none;
    }

    .megaMenu .subMenu li {
        margin: 10px 0;
        position: relative;
    }
    .megaMenu .subMenu li:after {
      position: absolute;
      right: 0;
      top: 0;
      content: ">";

    }
    .megaMenu .subMenu li a {
        display: block;
        width: 80%;
        background-color: #ddd;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="megaMenu">
        <li><a href="https://www.google.com/">Menu 1</a>
            <ul class="subMenu">
                <li><a href="https://www.google.com/">Sub Menu 1</a></li>
                <li><a href="https://www.google.com/">Sub Menu 2</a></li>
                <li><a href="https://www.google.com/">Sub Menu 3</a></li>
                <li><a href="https://www.google.com/">Sub Menu 4</a></li>
            </ul>
        </li>
        <li><a href="https://www.google.com/">Menu 2</a>
            <ul class="subMenu">
                <li><a href="https://www.google.com/">Sub Menu 1</a>
                    <ul class="subMenu">
                        <li><a href="https://www.google.com/">Sub_sub Menu 1</a></li>
                        <li><a href="https://www.google.com/">Sub_sub Menu 2</a></li>
                        <li><a href="https://www.google.com/">Sub_sub Menu 3</a></li>
                        <li><a href="https://www.google.com/">Sub_sub Menu 4</a></li>
                    </ul>
                </li>
                <li><a href="https://www.google.com/">Sub Menu 2</a>
                    <ul class="subMenu">
                        <li><a href="https://www.google.com/">Sub_sub Menu 1</a></li>
                        <li><a href="https://www.google.com/">Sub_sub Menu 2</a></li>
                        <li><a href="https://www.google.com/">Sub_sub Menu 3</a></li>
                        <li><a href="https://www.google.com/">Sub_sub Menu 4</a></li>
                    </ul>
                </li>
                <li><a href="https://www.google.com/">Sub Menu 3</a>
                    <ul class="subMenu">
                        <li><a href="https://www.google.com/">Sub_sub Menu 1</a></li>
                        <li><a href="https://www.google.com/">Sub_sub Menu 2</a></li>
                        <li><a href="https://www.google.com/">Sub_sub Menu 3</a></li>
                        <li><a href="https://www.google.com/">Sub_sub Menu 4</a></li>
                    </ul>
                </li>
                <li><a href="https://www.google.com/">Sub Menu 4</a>
                    <ul class="subMenu">
                        <li><a href="https://www.google.com/">Sub_sub Menu 1</a></li>
                        <li><a href="https://www.google.com/">Sub_sub Menu 2</a></li>
                        <li><a href="https://www.google.com/">Sub_sub Menu 3</a></li>
                        <li><a href="https://www.google.com/">Sub_sub Menu 4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="https://www.google.com/">Menu 3</a>
            <ul class="subMenu">
                <li><a href="https://www.google.com/">Sub Menu 1</a></li>
                <li><a href="https://www.google.com/">Sub Menu 2</a></li>
                <li><a href="https://www.google.com/">Sub Menu 3</a></li>
                <li><a href="https://www.google.com/">Sub Menu 4</a></li>
            </ul>
        </li>
        <li><a href="https://www.google.com/">Menu 4</a>
            <ul class="subMenu">
                <li><a href="https://www.google.com/">Sub Menu 1</a></li>
                <li><a href="https://www.google.com/">Sub Menu 2</a></li>
                <li><a href="https://www.google.com/">Sub Menu 3</a></li>
                <li><a href="https://www.google.com/">Sub Menu 4</a></li>
            </ul>
        </li>
    </ul>

这是第二个项目中带有子菜单的大型菜单，但是我编写的代码正在阻止内部锚点单击，请帮助我解决此问题，我需要此为手风琴，并且其行为与现在相同，但我还需要点击锚点

Answer 1

您应该像这样编辑您的js。 那是你想要的吗？

FormData

$(document).ready(function() {
        $(".megaMenu > li").click(function(e) {
          if(e.target == this){
            $(".megaMenu > li").not(this).find(".subMenu:first").slideUp();
            $(this).find(".subMenu:first").slideToggle();
          }
        });
        $(".subMenu > li").click(function(e) {
          if(e.target == this){
            $(".subMenu > li").not(this).find(".subMenu:first").slideUp();
            $(this).find(".subMenu:first").slideToggle();
          }
        });
    });

.megaMenu {
        display: flex;
        flex-direction: column;
    }

    .megaMenu>li {
        margin: 10px 0;
        padding: 10px;
        background-color: #eaeaea;
        cursor: pointer;
    }

    .megaMenu .subMenu {
        display: none;
    }

    .megaMenu .subMenu li {
        margin: 10px 0;
        position: relative;
    }
    .megaMenu .subMenu li:after {
      position: absolute;
      right: 0;
      top: 0;
      content: ">";

    }
    .megaMenu .subMenu li a {
        display: block;
        width: 80%;
        background-color: #ddd;
    }