学习资源

三级下拉菜单jQuery

2017-09-22  本文已影响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";
            }
  }
上一篇下一篇

猜你喜欢

热点阅读