jquery - 带有 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>

这是第二个项目中带有子菜单的大型菜单，但是我编写的代码正在停止内部锚点单击，请帮我解决这个问题，我需要这个作为手风琴并且表现得和现在一样，但我还需要点击锚点

标签： jquerypreventdefaultstoppropagation

Answer 1

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

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

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