时间戳

首页 > 解决方案 > 下拉菜单 Jquery html

jquery - 下拉菜单 Jquery html

问题描述

<nav>
            <ul class="huvud" id="top">
                <li>
                    <a href="#">Godis</a>
                    <ul class="hand">
                        <li>
                            <a href="#">Choklad</a>
                        </li>
                        <li>
                            <a href="HTML/lakrits.html">Lakrits</a>
                        </li>
                    </ul>   
                </li>
                <li>
                    <a href="#">Bakelser</a>
                    <ul class="hand">
                        <li>
                            <a href="#">Croissant</a>
                        </li>
                        <li>
                            <a href="#">idk</a>
                        </li>
                    </ul>   
                </li>
                <li>
                    <a href="#">Drycker</a> 
                    <ul class="hand">
                        <li><a href="#">Läsk</a></li>
                        <li>
                            <a href="#">Energidryck</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
$('nav').hover(
   ()=>$('.hand',this).slideDown(700)
,
   ()=> $('.hand', this).slideUp(700)
)
});
  </script>

我已经制作了这段代码，它的作用是当我将鼠标悬停在导航中的某个东西上方时，它会显示所有额外的列表，这不是这段代码的意图，我想做的是，如果我将鼠标悬停在“#Godis”上，然后只有一个会扩展，而其他人不会。

标签： jqueryhtml

解决方案

您需要找到与主菜单项相关的正确子菜单才能打开/关闭。

//$('ul.hand').hide();// Uncomment tis if you want all of them to be hidden initially.
$('ul.huvud > li').hover(function () {
  $('> ul.hand',this).slideDown(700);
},function () {
  $('> ul.hand',this).slideUp(700);
});
<nav>
    <ul class="huvud" id="top">
        <li>
            <a href="#" class="main">Godis</a>
            <ul class="hand">
                <li>
                    <a href="#">Choklad</a>
                </li>
                <li>
                    <a href="HTML/lakrits.html">Lakrits</a>
                </li>
            </ul>   
        </li>
        <li>
            <a href="#" class="main">Bakelser</a>
            <ul class="hand">
                <li>
                    <a href="#">Croissant</a>
                </li>
                <li>
                    <a href="#">idk</a>
                </li>
            </ul>   
        </li>
        <li>
            <a href="#" class="main">Drycker</a> 
            <ul class="hand">
                <li><a href="#">Läsk</a></li>
                <li>
                    <a href="#">Energidryck</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

推荐阅读