1

这是我的代码执行的示例。

我正在尝试开发一个包含以下代码多次迭代的网站：

$(function() {
    $('.nav1, .nav1x').not('#current').hover(
        function () {
            $(".nav1x a").css("visibility","visible");
          },
          function () {
            $(".nav1x a").css("visibility","hidden");
          }
    );
    $(".nav2, .nav2x").not('#current').hover(
        function () {
            $(".nav2x a").css("visibility","visible");
          },
          function () {
            $(".nav2x a").css("visibility","hidden");
          }
    );
    $(".nav3, .nav3x").not('#current').hover(
        function () {
            $(".nav3x a").css("visibility","visible");
          },
          function () {
            $(".nav3x a").css("visibility","hidden");
          }
    );
    $(".nav4, .nav4x").not('#current').hover(
        function () {
            $(".nav4x a").css("visibility","visible");
          },
          function () {
            $(".nav4x a").css("visibility","hidden");
          }
      );
});

由于选择的性质，我不知道如何更简单地写这个。它在 .nav1 和 .nav1x 上都有一个悬停事件，以防止在我的网站上发生闪烁，因此必须保留。你们中的任何聪明人都知道更好的方法来写这个吗？

4

4 回答 4

3

这似乎工作：http: //jsfiddle.net/gibble/mvNCz/5/

$(function() {
    $.each(['nav1', 'nav2', 'nav3', 'nav4'], function(index, value) {
        $("." + value + ", ." + value + "x").not('#current').hover(
            function () {
                $("." + value + "x a").css("visibility","visible");
            },
            function () {
                $("." + value  + "x a").css("visibility","hidden");
            }
        );
    });
});
于 2012-10-16T20:10:23.720 回答
2

我建议重组你的代码，html的当前结构是多余的。这是我简化菜单的方法。

的HTML

  <ul class="nav">
        <li id="current"><a href="#">Images</a></li>
        <li><span>.</span></li>
        <li><a href="#">Articles</a></li>
        <li><span>.</span></li>
        <li><a href="#">Links</a></li>
        <li><span>.</span></li>
        <li><a href="#">Contact</a></li>
    </ul>

CSS

.nav li{ display: inline;}
.nav li span, .nav li a{   
    font-size: 24px; 
    text-decoration:  none;
    color:black; 
}

.clone li a { color: blue }​

javascript

$('.nav').clone().addClass('clone').insertAfter('.nav').find('li').css('visibility', 'hidden');

$('.nav').on('hover', 'li', function(e){ 
    if( e.type === 'mouseenter' )
        $('.clone').find('li').eq( $(this).index() ).css('visibility', 'visible'); 
    else if( e.type === 'mouseleave' )
        $('.clone').find('li').eq( $(this).index() ).css('visibility', 'hidden');  
});

您当前代码的问题在于，对于任何未来的菜单项，您必须在 html 中两次更改三个不同的位置，在 javascript 中更改一次。使用上面的代码，您只需对 html 进行一次更改。

于 2012-10-16T20:29:15.973 回答
2

你完全可以不用javascript：http: //jsfiddle.net/Shmiddty/mvNCz/7/

.nav li{ display: inline;position:relative;}
.nav li span, .nav li a{   
    font-size: 24px; 
    text-decoration:  none;
    color:black; 
}

.nav li + li:before{
    content:'.';
    font-size:24px;
    display:inline-block;
    padding:0 .25em;
}

.nav li.current:after,
.nav li:hover:after{
    content:attr(data-name);
    font-size:24px;
    position:absolute;
    left:0;
    top:1em;
    color:#00f;
}
.nav li+li.current:after,
.nav li+li:hover:after{
    left:.75em;
}

HTML

<ul class="nav">
    <li class="current" data-name="Images"><a href="#">Images</a></li>
    <li data-name="Articles"><a href="#">Articles</a></li>
    <li data-name="Links"><a href="#">Links</a></li>
    <li data-name="Contact"><a href="#">Contact</a></li>
</ul>
于 2012-10-16T20:37:59.913 回答
0

据您所知，编写相同代码的更多 JQuery 方法是：

$(".nav li[id!=current]").hover(
    function () {
        $("."+ $(this).attr("class") + "x a").css("visibility","visible");
    }, 
      function () {
        $("."+ $(this).attr("class") + "x a").css("visibility","hidden");
    }
);

http://jsfiddle.net/96wvB/

于 2012-10-16T20:30:22.830 回答