jQuery - slideUp / slideDown не работает на ul? - PullRequest
Новая
       5

jQuery - slideUp / slideDown не работает на ul?

0 голосов
/ 30 ноября 2010

У меня есть следующий код на главной странице:

jQuery: 

$(window).load(function () {
    $("li.submenu").hover(
        function () { $(this).find("ul").slideDown("slow"); },
        function () { $(this).find("ul").slideUp("slow"); }
    );
});

HTML: 

<ul class="menu" runat="server" id="Menu">
    <li class="first" runat="server"><asp:HyperLink runat="server" NavigateUrl="/index.aspx">Home</asp:HyperLink></li>
    <li class="submenu" runat="server">
        <asp:HyperLink runat="server" NavigateUrl="/categories/index.aspx">Products</asp:HyperLink>
        <ul runat="server">
            <li runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category1.aspx">Dogs</asp:HyperLink></li>
            <li runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category2.aspx">Category 2</asp:HyperLink></li>
            <li runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category3.aspx">Category 3</asp:HyperLink></li>
            <li runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category4.aspx">Category 4</asp:HyperLink></li>
            <li runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category5.aspx">Category 5</asp:HyperLink></li>
            <li class="last" runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category6.aspx">Category 6</asp:HyperLink></li>
         </ul>
    </li>
    <li class="last" runat="server"><asp:HyperLink runat="server" NavigateUrl="/contact.aspx">Contact Us</asp:HyperLink></li>
</ul>

Если я изменил это значение на toggle("slide"), оно будет скользитьс одной стороны, а затем выходит с той же стороны, когда мышь входит и выходит из li.submenu.Это означает, что элементы существуют для определенного, и нет опечаток.Однако функции slideDown и slideUp, похоже, не работают (если медленный не означает сверхбыстрый ...).

Файлы, которые я включаю для jQuery и jQuery UI, представляют собой jquery-1.4.2.js и jquery-UI-1.7.2.custom.min.js.Этого достаточно, не правда ли?

У меня есть CSS, чтобы указать, что подменю отображается или скрывается мгновенно (display: block; / display: none;), если у пользователя нет JS.Есть ли шанс, что это вызывает проблему?Должен ли я изменить класс подменю с помощью JS, чтобы CSS не мог работать с ним, если JS включен?Или есть какая-то другая проблема, которая не вызвана CSS?

Ответы [ 3 ]

3 голосов
/ 30 ноября 2010

EDIT

Это решение на самом деле не работает, теперь, когда я его протестировал. Мне нужно, чтобы подменю оставалось видимым, когда мышь выходит из ссылки. В этом случае это не так. Вернуться к чертежной доске ..

На самом деле получается, что мое оригинальное решение работает, но только если я поставлю 

$("ul li.submenu ul").toggle(0);

перед ним (это переводит меню в противоположное и возвращается в исходное состояние, даже не подозревая об этом). Странно, но я могу жить с этим.

ОРИГИНАЛЬНЫЙ ОТВЕТ

Ну, через некоторое время, и довольно долго, глядя на код, размышляющий о том, что, черт возьми, с ним произошло, мне пришло в голову, что ссылка непосредственно в li.submenu была установлена ​​на display: block, с шириной и высотой установить на 100%. На самом деле это нужно было изменить, в результате чего jQuery выглядел следующим образом: 

$(document).ready(function () {
    $("li.submenu > a").hover(
        function () { $(this).closest("li.submenu").find("ul").slideDown("slow"); },
        function () { $(this).closest("li.submenu").find("ul").slideUp("slow"); }
    );
});

Вот и все ... проблема решена. Однако, кажется, требуется секунда или две, чтобы подобрать инструкции к слайду. Это просто означает, что если кто-то наводит указатель мыши на li.submenu в течение одной или двух секунд после загрузки страницы, он будет отображать меню мгновенно, а не скользить - хотя я думаю, что это не проблема.

Надеюсь, это поможет кому-то в будущем.

0 голосов
/ 16 марта 2015

Не забывайте, что анимации jQuery нельзя применять к таблицам (display: table; иногда также происходит сбой)

0 голосов
/ 30 ноября 2010

Я предполагаю, что ul находится внутри элемента li на вашей странице.Если вы хотите переместить родительский элемент ul текущего li, попробуйте 

$(window).load(function () {
    $("li.submenu").hover(
        function () { $(this).parents("ul").slideDown("slow"); },
        function () { $(this).parents("ul").slideUp("slow"); }
    );
});
...