用jquery创建导航栏

时间:2013-05-22 12:05:34

标签: javascript jquery html css

我正在尝试创建一个导航栏,下面是我的代码: HTML:  这是导航栏

<div class="cat-set">
  <div class="icon-wrap">
    <div class="icons active" id="mobiles"><div class="bgimg mobiles"></div></div>
    <div class="icons" id="laptops"><div class="bgimg laptops"></div></div>
  </div>
</div>

在每个'.icons'类的悬停时,将显示一个分区,因此有两个框可以显示和隐藏,这是代码:

<div class="cat-demo" id="mobiles">
  <p>This is for mobiles, if mouse is on .mobiles then this will be shown</p>
</div>
<div class="cat-demo" id="tablets">
  <p>This is for tablets, if mouse is on .mobiles then this will be shown</p>
</div>

这是Jquery代码:

$('.icons').hover(function(){
  $('.icons').each(function(){$(this).removeClass("active");});
  $(this).addClass("active");
  var position = $(this).position();
  $('.cat-demo').css({'left':(position.left-4)+'px'});
  var showThis=$(this).attr("id")
  $(".cat-demo:visible").hide()
  $("'#"+showThis+".cat-demo'").show();
});

所以直到这里一切正常,但问题是我想要隐藏'.cat-demo' 如果鼠标指针超出'.icons'并且指针位于.cat-demo上,那么它不应该隐藏它。请帮帮我...如果你想改变html布局,请继续。

这是此http://jsfiddle.net/ndevJ/

的小提琴链接

1 个答案:

答案 0 :(得分:0)

是否有必要将js用于此类菜单? 如果您的菜单具有简单的行为,则仅使用CSS显示/隐藏菜单的子项。

例如:

<ul class="cat-set">
    <li>
        mobile
        <p>
            This is for mobiles, if mouse is on .mobiles then this will be shown
        </p>
    </li>
    <li>
        laptops
        <p>
            his is for tablets, if mouse is on .mobiles then this will be shown
        </p>
    </li>
</ul>

和CSS:

ul.cat-set > li {display: inline-block; margin: 10px;}
ul.cat-set > li p {display: none; position: absolute;}
ul.cat-set > li:hover p {display: block;}