Question

所以这是实际页面remsen，这是代码的样子。

<script>
    $(document).ready(function(){

            $(".nav_drop_menu1").hide();
            $(".nav_button1").show();

        $('.nav_button1').hover(function(){
        $(".nav_drop_menu1").slideToggle();
        });

            $(".nav_drop_menu2").hide();
            $(".nav_button2").show();

        $('.nav_button2').hover(function(){
        $(".nav_drop_menu2").slideToggle();
        });
    });
    </script>


<br>



    <nav>
    <ul>
        <li class="nav_button1">Home</li>
        <li class="nav_button2">Services</li>
        <li>Contact</li>
            <div class="nav_drop_menu1">
                <ul>
                    <li><a href="index.html">Current Brews</a></li>
                    <li><a href="aboutus.html">About Us</a></li>
                    <li><a href="contactus.php">Contact Us</a></li>
                </ul>
            </div>
            <div class="nav_drop_menu2">
                <ul>
                    <li><a href="index.html">Current Brews</a></li>
                    <li><a href="aboutus.html">About Us</a></li>
                    <li><a href="contactus.php">Contact Us</a></li>
                </ul>
            </div>
    </ul>
</nav>

任何人都可以帮我吗？

我想要的是下拉菜单保持打开足够长的时间以实际点击它，或者至少在它被徘徊时。

Answer 1

好的，我删除了所有的JQuery。我用css添加了所有效果。

首先，您不需要隐藏子菜单，您可以在css中将它们定义为max-height:0px。通常使用display:none，但无法通过转换动画显示。 height:auto也有点毛躁。

第二：你可以使用纯css生成所有效果，从而逃避包括jquery库，因为它实际上非常重。

第三：我将<div>移到相应的<li>内，以便更容易控制。

我添加了一些其他类等，但试图保持初始代码的最大值不变。但是，正如您在下面的演示中所看到的，您可以删除很多。

我认为这些是我所做的css的所有变化：

.nav_button:hover>.submenu>ul{
    max-height: 30px;
}

.submenu{
    position: absolute;
    left: 0;
}

.submenu ul{
    overflow: hidden;
    transition: max-height 0.3s linear;
    max-height: 0px;
}

和

.nav_drop_menu1, .nav_drop_menu2, .nav_button1, .nav_button2{
    display: inline-block;
}

成为：

.nav_button1, .nav_button2{
    display: inline-block;
}

这是结果的DEMO。请记住，动画功能和动画速度都可以轻松更改。

我希望，这是你期望的结果。

悬停导航不会保持打开状态单击

1 个答案: