Question

我正在尝试制作一个与本网站上的菜单类似的菜单：http://www.latimes.com/。但它不如Los Angeles Times那么好。

我该如何解决？还有另一种方式吗？

以下是代码显示/隐藏子菜单，点击项目。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
        var $j = jQuery.noConflict();
        $j(document).ready(function() {
        });
        function Reveal(a){
            var ul = a.parentNode.getElementsByTagName("UL").item(0);
            $j(ul).show({height: 'toggle' ,opacity: 'toggle'}, 1);
        }
</script>

我在鼠标上调用Reveal函数：

<li><a href="#" onmousover="Reveal(this);">testimonials</a>

Answer 1

效果不好或根本不起作用？我担心你错误地使用了show功能。那个toggle参数对我来说也不清楚。

我没有在“洛杉矶时报”菜单中看到任何动画，但是该语法（定义切换变量并使用它们没有引号）更适合jQuery animate函数而不是show 。它是.animate( properties, [duration,] [easing,] [complete] )

请参阅http://api.jquery.com/show/和http://api.jquery.com/animate/

按照某种方式尝试完成它，我会做类似的事情（未经测试！）

<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
       $j('#mainNavi > li').hover(function() {
              $j(this).children('ul').show();
        }, function() {
              $j('#mainNavi > li > ul').hide();
        });
    });
</script>

作为HTML，你会有类似的东西：

<ul id="mainNavi">  
    <li>  
         <a href="">link1</a>  
         <ul style="display: none">  
              <li>submenu item1</li>  
              <li>submenu item2</li>  
         </ul>  
    </li>  
    <li>  
         <a href="">link2</a>  
         <ul style="display: none">  
              <li>submenu item1</li>  
              <li>submenu item2</li>  
         </ul>  
    </li>  
</ul>

如何制作像www.latimes.com一样的jQuery菜单？

1 个答案: