Mega menu slideUp и slideDown с e.preventDefault (), e.stopPropagation (), остановка внутренней привязки для нажатия - PullRequest
Новая
       70

Mega menu slideUp и slideDown с e.preventDefault (), e.stopPropagation (), остановка внутренней привязки для нажатия

0 голосов
/ 18 марта 2019

Вот такой дизайн мегаменю, и я хочу, чтобы он работал как аккордеон, который сейчас работает, но проблема с внутренними якорями, которые сейчас не активируются. 

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

Вот мегаменю с подменю во втором элементе, но код, который я написал, останавливает щелчок внутреннего якоря. Пожалуйста, помогите мне с этой проблемой, мне нужно это как баян и вести себя так же, как сейчас , но мне нужно, чтобы якорь также был нажат

1 Ответ

1 голос
/ 18 марта 2019

Вы должны отредактировать свой 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>
...