Question

我正在尝试从头开始编写jQuery悬停菜单，因为我现在正在学习jQuery。我有一个悬停菜单的基础知识，但我似乎无法正确定位我的子菜单，他们打破了我的整个菜单。 default.css样式表只有* {padding：0;保证金：0}。

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" type="text/css" href="css/default.css" />

    <script type="text/javascript" src="jQuery/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            $('.submenu').hide();
            $('.dropdown li').hover(function() {
                $('.submenu').show();
            }, function() {
                $('.submenu').hide();
            });
        });

    </script>

    <style type="text/css">

        #menu {
            width: 1000px;

            margin:auto;
            position: relative;

            text-align: center;
            text-transform: uppercase;
        }

        .mnLinks {
            padding: 0;
            margin: 0;

            display: inline;
            position: relative;
        }

        .mnLinks a {
            width: 200px;

            padding: 10px 0;
            margin: 0;
            float: left;                

            display: inline-block;
            color: #ffffff;
            background: #333337;
            text-decoration: none;
        }

.submenu li a {
            width: 200px;

            position: relative;
            top:100px;

        }
    </style>

</head>

<body>

<div id="menu">

    <ul class="dropdown">

        <li class="mnLinks"><a href="#" id="lnk01">Link #01</a></li>

            <ul class="submenu">

                <li><a href="#">SubLink#01</a></li>

                <li><a href="#">SubLink#02</a></li>

                <li><a href="#">SubLink#03</a></li>

            </ul>

        <li class="mnLinks"><a href="#">Link #02</a></li>

        <li class="mnLinks"><a href="#">Link #03</a></li>

            <ul class="submenu">

                <li><a href="#">SubLink#04</a></li>

                <li><a href="#">SubLink#05</a></li>

                <li><a href="#">SubLink#06</a></li>

            </ul>

        <li class="mnLinks"><a href="#">Link #04</a></li>

        <li class="mnLinks"><a href="#">Link #05</a></li>

    </ul>

</div>

</body>

</html>

Answer 1

希望这有效（尽管你可能想要重写你的css）：

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" type="text/css" href="css/default.css" />

    <script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            $('.submenu').hide();
            $('.dropdown li').hover(function() {
                $(this).children('.submenu').show();
            }, function() {
                $(this).children('.submenu').hide();//Show and hide only child elements
            });
        });

    </script>

    <style type="text/css">

        #menu {
            width: 1000px;

            margin:auto;
            position: relative;

            text-align: center;
            text-transform: uppercase;
        }

        .mnLinks {
            padding: 0;
            margin: 0;

            display: inline;
            position: relative;
        }

        .mnLinks a {
            width: 200px;

            padding: 10px 0;
            margin: 0;
            float: left;                

            display: inline-block;
            color: #ffffff;
            background: #333337;
            text-decoration: none;
        }

.submenu li a {
            width: 200px;

            position: relative;
            /*top:100px; Not needed since it pushes items down...*/

    }
ul
{
list-style-type:none;
margin:0;
padding:0;
}
.dropdown li
{
float:left;
}
.mnLinks li
{
float:none;
}
    </style>

</head>

<body>

<div id="menu">

    <ul class="dropdown">

        <li class="mnLinks"><a href="#" id="lnk01">Link #01</a>

            <ul class="submenu">

                <li><a href="#">SubLink#01</a></li>

                <li><a href="#">SubLink#02</a></li>

                <li><a href="#">SubLink#03</a></li>

            </ul>
            </li><!--As stated in comment above.-->

        <li class="mnLinks"><a href="#">Link #02</a></li>

        <li class="mnLinks"><a href="#">Link #03</a>

            <ul class="submenu">

                <li><a href="#">SubLink#04</a></li>

                <li><a href="#">SubLink#05</a></li>

                <li><a href="#">SubLink#06</a></li>

            </ul>
            </li>

        <li class="mnLinks"><a href="#">Link #04</a></li>

        <li class="mnLinks"><a href="#">Link #05</a></li>

    </ul>

</div>

</body>

</html>

Fiddle

Answer 2

试试这个：

<强> Working Example

HTML
在<ul class="submenu">

中嵌套<li class="mnLinks">

<div id="menu">
    <ul class="dropdown">
        <li class="mnLinks"><a href="#" id="lnk01">Link #01</a>
            <ul class="submenu">
                <li><a href="#">SubLink#01</a></li>
                <li><a href="#">SubLink#02</a></li>
                <li><a href="#">SubLink#03</a></li>
            </ul>
        </li>
        <li class="mnLinks"><a href="#">Link #02</a></li>
        <li class="mnLinks"><a href="#">Link #03</a>

            <ul class="submenu">
                <li><a href="#">SubLink#04</a></li>
                <li><a href="#">SubLink#05</a></li>
                <li><a href="#">SubLink#06</a></li>
            </ul>
        </li>
        <li class="mnLinks"><a href="#">Link #04</a></li>
        <li class="mnLinks"><a href="#">Link #05</a></li>
    </ul>
</div>

CSS
这里有很多变化，主要是为了纠正继承的风格问题。

#menu {
    width: 1000px;
    text-transform: uppercase;
    text-align:center;
}
ul, li {
    list-style:none;
    text-decoration:none;
}
.dropdown {
    width: 1000px;
    padding: 0;
    margin: 0;
}
.mnLinks {
    width: 200px;
    padding: 10px 0;
    margin: 0;
    display: inline-block;
    float: left;
    color: #ffffff;
    background: #333337;
    text-decoration: none;
}
.mnLinks a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px 0;
}
.submenu {
    position:relative;
    top:10px;
}
.submenu li a {
    display:block;
    float:none;
}

JS
更改了子菜单的选择方式。

$(document).ready(function () {
    $('.submenu').hide();
    $('.dropdown li').hover(function () {
        $(this).children('.submenu').show();
    }, function () {
        $(this).children('.submenu').hide();
    });
});

API Documentation for .children()

弄清楚我的jQuery菜单的问题

2 个答案: