Question

我正试图让我的水平子菜单向下滑动。但我是jQuery的新手。尝试转到jQuery索引，但我无法弄明白。也试着看别人的问题，但没有一个解决方案有效。无论如何。这是其中的东西。

我在教程中找到了一些小jQuery：http://www.callmenick.com/tutorials/slide-down-menu-with-jquery-and-css

$(document).ready(function() {
    $('.dropdown').click (
        function(){
            $(this).children('.sub-menu').slideDown(400);
        },
        function(){
            $(this).children('.sub-menu').slideUp(200);
        }
    );
});

CSS

#nav {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    margin-top: 15px;
    list-style: none;
    background: none;
    text-align: center;
    z-index: 100;
}
#nav li {
    display: inline;
}
#nav li a {
    width: 16.5%;
    float: left;
    font-family: 'MedioRegular', "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 15px;
    text-transform: uppercase;
    line-height: 40px;
    color: #452D16;
    text-decoration: none;
    margin: 0;
    padding:0;
    background: none;
}
#nav li:hover a {
    color: #617D4B;
    text-decoration: none;
}
#nav ul {
    display: none;
    position: absolute;
    border-top: 1px solid black;
    width: 93%;
    height: 50px;
    align: center;
    background-image:url("../images/backgrounds/white_wall_hash.png");
    text-align: center;
    vertical-align: middle;
    margin: 35px 0 0 0;
    z-index: 98;
}
#nav ul li a {
    text-align: center;
    float: left;
    width: auto;
    font-family: 'MedioRegular', "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 45px;
    color: #452D16;
    text-decoration: none;
    margin: 0;
    padding: 0 30px 0 0;
    background-image:url("../images/backgrounds/white_wall_hash.png");
}
#nav ul li a:hover {
    color: #617D4B;
    text-decoration: none;
    text-shadow: none;
}

HTML

<ul id="nav">
        <li>
            <a href="#">Home</a>
        </li>
        <li class="dropdown">
            <a href="#">About</a>
            <ul class="sub-menu">
                <li>
                    <a href="#" >#1</a>
                </li>
                <li>
                    <a href="#" >#2</a>
                </li>
                <li>
                    <a href="../about_pages/cemhelp.html">#3</a>
                </li>
                <li>
                    <a href="#" >#4</a>
                </li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#">Resources</a>
            <ul class="sub-menu">
                <li>
                    <a href="#" >#1</a>
                </li>
                <li>
                    <a href="#" >#2</a>
                </li>
                <li>
                    <a href="#">#3</a>
                </li>
            </ul>
</li>
        <li class="dropdown">
            <a href="#">Conferences</a>
            <ul class="sub-menu">
                <li>
                    <a href="#" >#1</a>
                </li>
                <li>
                    <a href="../conference_pages/campjoy.html" >Camp Joy</a>
                </li>
                <li>
                    <a href="#" >#2</a>
                </li>
                <li>
                    <a href="#" >#3</a>
                </li>
                <li>
                    <a href="#">#4</a>
                </li>
                <li>
                    <a href="#" >#5</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#" >Contact Us</a>
        </li>
    </ul>

Answer 1

从它的外观来看，你试图定位li，但你的li大小为0x0

Answer 2

我和我哥哥一起解决了这个问题，他编写了一个临时解决方案，直到找到另一个。如果有人找到更快，更好的解决方案，请不要犹豫更新。

爪哇

$(document).click(function() {
showDropDown(null);
});

$(".dropdown").click(function(event) {
showDropDown(this);
event.stopPropagation();
});

var showDropDown = function(object) {
$(".dropdown").each(function(i, element) {
    var submenu = $(element).children(".sub-menu");
    if(!$(submenu).is(":hidden")) {
        $(submenu).slideUp(200);
    }
});
if(object != null) {
    $(object).children(".sub-menu").slideDown(400);
}
}

http://jsfiddle.net/5j3S3/76/

jquery下拉滑动菜单

2 个答案: