Question

我有一个具有幻灯片功能的移动菜单。

默认情况下，仅显示父页面。如果父母有孩子，那么当用户点击它时，我想向下滑动子菜单，如果他们再次点击，那么我希望它链接到父页面，如果父页面没有孩子那么我想要它可以直接通过。

这是我得到的代码，但我知道那里有一个或四个错误。希望有人可以提供帮助：）

if($(".mob-navigation > ul > li > a").next(".sub-menu").length) {
  $(this).one("click", true);
} else {
  $(this).one("click", true);
}

Answer 1

我不知道你的HTML是怎么样的，所以要为你编写确切的代码有点困难。但也许您可以检查子菜单是否可见？如果可见，则转到父页面，否则可以使子菜单可见。

Answer 2

            $(document).ready(function (){
                $("#subnav").parent("li").addClass("hassub");
                $("#subnav").parent("li").append("<div class='overlay'></div>");
                $(".hassub").click(function (){
                    $("#subnav").toggle();
                    $(".overlay").toggle();
                });
            });

ul{
                list-style: none;
                width: 150px;
            }
            li{
                padding: 5px 10px;
                height: 15px;
                background: #cccccc;
                margin: 1px 0;
            }
            li.hassub{
                height: auto;
                position: relative;
                background: #bbbbbb;
            }
            a{
                color: black;
                text-decoration: none;
            }
            #nav{
                
            }
            #subnav{
                display: none;
                
            }
            .overlay{
                height: 25px;
                content: " ";
                width: 100%;
                background: rgba(255,0,0,.3);
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
            }

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="http://softdesigns.in/">About</a>
                <ul id="subnav">
                    <li><a href="https://www.google.co.in">Personal</a></li>
                    <li><a href="http://stackoverflow.com/">Professional</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>

试试这个。我希望这是你在找。

如果父菜单有子菜单，则单击两次转到链接，如果没有子菜单单击一次链接

2 个答案: