Сложность с скользящим div в usin jQuery

0

Я смотрел на кучу разных постов здесь относительно этого, я думаю, что я правильно слежу, но мой код не выполняется, так что, очевидно, я не так. Удивление, если кто-то здесь может заметить что-то, что я пропускаю.

У меня есть панель навигации, и когда пользователи накладываются на элемент меню, я хочу, чтобы div соскальзывал из-под него и показывал кучу контента.

Здесь разметка:

<nav class="site-navigation main-navigation" role="navigation">
    <div class="menu-1-container">
        <ul id="menu-1" class="menu">
             <li id="menu-item-1">
                <a href="#">Releases</a>
            </li>
        </ul>
    </div>
</nav>

<div class="dropdown-contain">
    <p>Content</p>
</div>

Здесь css:

.dropdown-contain {
    display: none;
}

Здесь.js (все еще учась и не полностью понял):

$(document).ready(function(){
    $(".menu-item-475").hover(function () {
        $(".dropdown-contain").stop(true, true).slideToggle("slow");
    });
});

Вот скрипка. http://jsfiddle.net/ericbrockman/mk4yu/3/

огромное спасибо!!

  • 0
    Прежде всего, включите версию jquery, которую вы используете на скрипке, через верхний левый выпадающий список.
  • 0
    и во-вторых, если вы нажмете «убрать» в jsfiddle и ваш код все еще не работает, это означает, что ваш синтаксис неправильный
Теги:
slidetoggle

1 ответ

1
Лучший ответ

я немного изменил твою скрипку, посмотри здесь

вещи, чтобы заметить:

1 - you should select your jquery library on the left panel of jsfiddle.
2 - delegating event handlers by attaching them to document seem to work better for me
3 - using custom animation you have more control over the sliding
4 - set position:absolute for the sliding panel if you want it to work correctly
5 - when attaching the mouse hover to a menu item, always include the submenu as well or you will not be able to click the submenu since when you move the mouse out of the menu item the submenu goes off

если у вас есть еще вопросы, пожалуйста, дайте мне знать. -if мой ответ помог вам, пожалуйста, подумайте о его принятии :)

Поделиться
  • 0
    Спасибо @banana, это очень полезно. Действительно ценю вдумчивый ответ и комментарии в JS (супер полезно для новичка, как я). Это хорошо работает в скрипке, но по какой-то причине не работает на живом сайте. Вот URL, если вы заинтересованы в том, чтобы взглянуть: ericbrockmanwebsites.com
  • 0
    я посмотрел кажется, вы не включили библиотеки jQuery. если вы загляните в консоль разработчика в своем браузере, вы заметите исключение «$ не является функцией», это потому, что jQuery является библиотекой расширений для javascript и добавляет селектор jQuery $ в javascript. jQuery можно скачать бесплатно, просто загрузите в jQuery его просто 1 файл .js, свяжите его с вашей страницей, и он будет работать :)
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню