1

我正在使用现有模板工作，并且我已经获得了将类 ulDisplay 添加到列表项并在悬停时打开整个菜单的菜单。现在我想为动作制作动画而不是突然打开？菜单有四层深，因此找到多层深的孩子的线条很重要。

这是脚本：

$(document).ready(function() {


        $('ul#nav-primary').hover(function() { 

                $(this).addClass("ulDisplay");
                $(this).find('ul,li').removeClass("ulHide");
                $(this).find('ul,li').addClass("ulDisplay");

            },

        function() { 
            $('ul#nav-primary').removeClass("ulDisplay"); 
            $('ul#nav-primary').find('ul,li').removeClass("ulDisplay");
            $('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
            })


    });

抱歉应该早点添加：

到目前为止我已经尝试过但不起作用的方法：

$(document).ready(function() {


            $('ul#nav-primary').hover(function() { 
                    $(this).slideToggle('normal');
                    $(this).find('ul,li').removeClass("ulHide");
                    $(this).find('ul,li').addClass("ulDisplay");
                },

            function() {  
                $('ul#nav-primary').slideToggle('normal');
                $('ul#nav-primary li').find('ul,li').removeClass("ulDisplay");
                $('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
                })


        });

我也试过：

$(document).ready(function() {


            $('ul#nav-primary').hover(function() { 

                    //$(this).addClass("ulDisplay");
                    $('ul#nav-primary li').find('ul,li').removeClass("ulHide");
                    $('ul#nav-primary li').find('ul,li').addClass("ulDisplay").stop(true, true).slideToggle(1000);

                },

            function() { 
                //$('ul#nav-primary').removeClass("ulDisplay"); 
                $('ul#nav-primary li').find('ul,li').removeClass("ulDisplay").stop(true, true).slideToggle(1000);
                $('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
                })


        });

最后：

$(document).ready(function() {


        $('ul#nav-primary').hover(function() { 

                //$(this).addClass("ulDisplay");
                $('ul#nav-primary li').find('ul,li').removeClass("ulHide");
                $('ul#nav-primary li').find('ul,li').addClass("ulDisplay", 1000);

            },

        function() { 
            //$('ul#nav-primary').removeClass("ulDisplay"); 
            $('ul#nav-primary li').find('ul,li').removeClass("ulDisplay", 1000);
            $('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
            })


    });

这是HTML：

<div id="nav">
    <h3><a href="/TemplatePackage/subtopic/B/index.html">Topic Homepage</a></h3>
    <ul id="nav-primary">
        <li><a href="#">Level 1</a>
            <ul>
                <li><a href="#">Level 2</a>
                    <ul>
                        <li><a href="#">Level 3</a>
                            <ul>
                                <li><a href="#">Level 4 - Item 1</a></li>
                                <li><a href="#">Level 4 - Item 2</a></li>
                                <li><a href="#">Level 4 - Item 3</a></li>
                                <li><a href="#">Level 4 - Item 4</a></li>
                                <!--<li><a href="/TemplatePackage/subtopic/B/basic_info/screening/level4.html#5">Level 4 - Item 5</a></li>-->
                            </ul>
                        </li>
                        <li><a href="#">Level 3</a></li>
                        <li><a href="#">Level 3</a></li>
                        <li><a href="#">Level 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Level 2</a></li>
                <li><a href="#">Level 2</a></li>
                <li><a href="#">Level 2</a></li>
                <li><a href="#">Level 2</a></li>
                <li><a href="#">Level 2</a></li>
            </ul>
        </li>
        <li><a href="#">Level 1</a>
            <ul>
                <li><a href="#">Level 2</a><ul>
                    <li><a href="#">Level 3</a>
                            <ul>
                                <li><a href="#">Level 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Level 1</a>
            <ul>
                <li><a href="#">Level 2</a></li>
            </ul>
        </li>
        <li><a href="#">Level 1</a></li>
        <li><a href="#">Level 1</a></li>
        <li><a href="#">Level 1</a></li>
    </ul>
</div>
<div class="bottom"></div>
4

3 回答 3

0

jQuery UI（核心）可以在添加类时转换一些属性。

$(this).find('ul,li').addClass("ulDisplay",1000); // milliseconds

但是，如果您所做的只是显示和隐藏嵌套的 UL 块，请尝试使用.slideToggle()（或单独使用.slideDown()and .slideUp()）而不是添加和删除类。

于 2012-06-20T18:23:57.443 回答
0

使用 JQuery 动画来做你想做的事。尝试使用.toggle()功能：

 $(document).ready(function() {


    $('#primaryMenu').hover(function() { 

            $(this).toggle('fast');
            //$(this).find('ul,li').removeClass("ulHide");
            //$(this).find('ul,li').addClass("ulDisplay");

        },

    function() { 
        $('#primaryMenu').toggle('fast'); 
        //$('ul#nav-primary').find('ul,li').removeClass("ulDisplay");
        //$('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
        })


});

更新

使用不可更改的模板在大多数情况下都很好，但有些时候你会很紧张。然而，并非一切都丢失了！您可以使用 javascript 来更改代码，我在接受的答案中找到了这篇文章Pure javascript method to wrap content in a div您可以找到以下代码：

 org_html = document.getElementById("slidesContainer").innerHTML;
 new_html = "<div id='slidesInner'>" + org_html + "</div>";
 document.getElementById("slidesContainer").innerHTML = new_html;

我个人觉得这很神奇！并将其写下来，因为我认为它非常有用。希望它可以帮助你。

于 2012-06-20T18:28:23.120 回答
0

好的，所以我要感谢你们两位的洞察力和帮助。它确实有助于找到答案。这是最终工作的代码：

$(document).ready(function() {  

     $('ul#nav-primary').find('li').hover(function() {   
          $(this).children('ul').slideDown('normal');
          $(this).children('ul').removeClass('ulHide');
          $(this).children('ul').addClass('ulDisplay');
          $(this).children('ul').children('li').removeClass('ulHide');
          $(this).children('ul').children('li').addClass('ulDisplay');
                });


});

非常感谢 EH_warch 和 Blazemonger

我发现的问题实际上在于 CSS： 观看此视频： http: //jqueryfordesigners.com/video.php ?f=animation-jump2.flv 这将帮助人们理解为什么动画中有跳跃。

于 2012-06-22T15:01:49.590 回答