美文网首页学习资源
三级下拉菜单jQuery

三级下拉菜单jQuery

作者: 小小蒜头 | 来源:发表于2017-09-22 21:53 被阅读6次

HTML代码

<ul>
    <li>菜单栏
        <ul>
            <li>栏目一
                <ul>
                    <li>
                        列表一
                    </li>
                </ul>
            </li>
            <li>栏目二
                <ul>
                    <li>
                        列表一
                    </li>
                    <li>
                        列表二
                    </li>
                </ul>
            </li>
            <li>栏目三
                <ul>
                    <li>
                        列表一
                    </li>
                    <li>
                        列表二
                    </li>
                    <li>
                        列表三
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Jquery代码

$(function () {
            $("li").has("ul").mouseover(function () {
                $(this).children().css("display", "block");
            }).mouseout(function () {
                $(this).children().css("display", "none");
            });
        });

JS代码

function showTab(value) {
        var menu = document.getElementById(value);
        var type = menu.style.display;
        if(type == "none") {
                menu.style.display = "block";
        } else {
                menu.style.display = "none";
            }
  }

相关文章

网友评论

    本文标题:三级下拉菜单jQuery

    本文链接:https://www.haomeiwen.com/subject/fuqqextx.html