JQuery раскрывающееся меню

Question

JQuery раскрывающееся меню

0

Я пытаюсь сделать свое горизонтальное подменю слайдом вниз. Но я новичок в jQuery. Попытался перейти к индексу jQuery, но я не могу это понять. Также попытался посмотреть на другие вопросы, но ни одно из решений не работало. Так или иначе. Вот материал.

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

Какой небольшой 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>

Becca 22 фев. 2014, в 21:08

Источник

Теги:

jquery

drop-down-menu

2 ответа

0

По внешнему виду, вы пытаетесь настроить таргетинг на li, но ваш li равен 0x0

corvid 22 фев. 2014, в 18:17

Ещё вопросы

Becca · Accepted Answer · 2014-02-26T13-00-00.000Z

Я работал над проблемой с моим братом, и он закодировал временное решение, пока не будет найдено другое. Если кто-то найдет более быстрое и лучшее решение, не стесняйтесь обновлять его.

Ява

$(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/