0

我的目标是使用 jquery 创建一个导航菜单。当用户将鼠标悬停在 left1 上时，应该会出现 right 1，依此类推。我正在尝试在 jquery 中对此进行编码，但我有点束手无策。请协助

css

.left {
background: #fff;
padding: 10px;
width: 200px;
border: 1px solid #ccc; 
position:relative

}
.right{
background:aqua; 
 height:270px;
width:200px; 
float:right; 
visibility:hidden

}

html

 <div class="left" id="left1">left 1</div>
 <div class="left" id="left2">left 2</div>
 <div class="left" id="left3">left 3</div>
 <div class="left" id="left4">left 4</div>

<div class="right" id="r1">right 1</div>
<div class="right" id="r2">right 2</div>
<div class="right" id="r3">right 3</div>
<div class="right" id="r4">right 4</div>

jQuery

$(document).ready(function(){ 
function rightFrame(){
$('#r1').css({
        'position':'absolute',
        'top':'40px',
        'left':'300px',
        'visibility':'visible'  
        }); 
$('#r1').show();

}
$('#left1').mouseover(function(e){ 
 $("#left"+ID).css('background','red'); 
}); 
$('.left').mouseout(function(e){ 
$('.right').hide(); 
}); 
});

我的问题可能看起来有点不对劲，但我希望你能理解我的目的。谢谢

4

3 回答 3

2

像这样的东西？

$(".left").hover(function() {
    var id = $(this).attr('id').match(/\d+$/);
    $("#r" + id).css({'visibility':'visible'});
}, function() {
    $(".right").css({'visibility':'hidden'});
});​

演示

于 2012-06-28T17:42:12.313 回答
1

这里有一些基本问题。

  1. ID 未定义。
  2. 您有一个名为的函数rightFrame()，但您没有在脚本中的任何地方调用它。
  3. 您应该使用类和$(this)来打开和关闭菜单项而不是 ID。

这是一个向您展示简单修复的小提琴：http: //jsfiddle.net/PFnDe/1/

编辑：我想我也应该在这里发布我的 JS。

function rightFrame(e) { // Moved this outside of DOM ready function.
    $('#' + e).css({
        'position': 'absolute',
        'top': '40px',
        'left': '300px',
        'visibility': 'visible'
    });
    $('#' + e).show();
}

$(document).ready(function() {
    $('.left ').mouseover(function(e) {
        rightFrame($(this).data('item')); // Added this
        $(this).css('background-color', 'red');
    });
    $('.left ').mouseout(function(e) {
        $('.right ').hide();
        $(this).css('background-color', '#fff'); // Added this
    });
});
于 2012-06-28T17:43:54.997 回答
0

这是使用 jquery 执行此操作的方法：http: //jsfiddle.net/surendraVsingh/h4wsS/6/

查询：

$('.left').hover(function(){
  var x = ($(".left").index(this))+1;
  var rx = '#r'+x;
  $(rx).toggle();

});​

CSS： 删除了 visibility:hidden 并添加了 display:none。

.right{
   background:aqua; 
   height:270px;
   width:200px; 
   float:right; 
   display:none;
}​
于 2012-06-28T18:49:39.937 回答