使jQuery可扩展来显示和隐藏div

我有以下菜单的开始显示一个隐藏div当一个按钮悬停，但希望能够创建更多的按钮和关联的div，而不重复相同jQuery和只是改变ID名称。使jQuery可扩展来显示和隐藏div

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 

<style> 
#show, #show2 { 
    position: absolute; 
    visibility: hidden; 
    height: 200px; 
    width: 100%; 
    background: #002061; 
    color: white; 
    z-index: 999; 
    transition: all .5s ease-in-out; 
    opacity: 0; 
    box-shadow: inset 0 5px 16px #001031; 

} 
</style> 


<button id="show_div">x</button> 
<button id="show_div2">y</button> 

<div id="show">show</div> 
<div id="show2">show 2</div> 


<script> 
$(document).ready(function(){ 
    $("#show_div").mouseover(function() { 
     $("#show").css('visibility','visible').css('opacity','1'); 
    }); 
    $("#show_div").mouseout(function() { 
     $("#show").css('visibility','hidden').css('opacity','0'); 
    }); 
    $("#show").mouseover(function() { 
     $("#show").css('visibility','visible').css('opacity','1'); 
    }); 
    $("#show").mouseout(function() { 
     $("#show").css('visibility','hidden').css('opacity','0'); 
    }); 

    $("#show_div2").mouseover(function() { 
     $("#show2").css('visibility','visible').css('opacity','1'); 
    }); 
    $("#show_div2").mouseout(function() { 
     $("#show2").css('visibility','hidden').css('opacity','0'); 
    }); 
    $("#show2").mouseover(function() { 
     $("#show2").css('visibility','visible').css('opacity','1'); 
    }); 
    $("#show2").mouseout(function() { 
     $("#show2").css('visibility','hidden').css('opacity','0'); 
    }); 
}); 
</script>

我已经能够采取一些措施，使工作（见下文），但一直没能使其在多个按钮的工作。任何帮助将非常感激。谢谢

<script> 
var arr = [ "#showMe", "#showMe2" ]; 
jQuery.each(arr, function(i, val) { 
    $("#x").mouseover(function() { 
     $(val).css('visibility','visible').css('opacity','1'); 
    }); 
    $("#x").mouseout(function() { 
     $(val).css('visibility','hidden').css('opacity','0'); 
    }); 
    $(val).mouseover(function() { 
     $(val).css('visibility','visible').css('opacity','1'); 
    }); 
    $(val).mouseout(function() { 
     $(val).css('visibility','hidden').css('opacity','0'); 
    }); 
}); 
</script>

来源

2014-01-07 user3169890

你可以使用类选择用于此目的 –

感谢您的帮助，这是我结束了：

CSS

<style> 
.menu { 
    position: absolute; 
    visibility: hidden; 
    height: 200px; 
    width: 100%; 
    background: #002061; 
    color: white; 
    transition: all .5s ease-in-out; 
    opacity: 0; 
    box-shadow: inset 0 5px 16px #001031; 
} 
</style>

<script> 
$(function(){ 
    $("[id^=show]").mouseenter(function() { 
     $("#div"+ this.id.split("show")[1]).css('visibility','visible').css('opacity','1'); 
    }); 
    $("[id^=show]").mouseleave(function() { 
     $("#div"+ this.id.split("show")[1]).css('visibility','hidden').css('opacity','0'); 
    }); 
    $("[id^=div]").mouseenter(function() { 
     $("#div"+ this.id.split("div")[1]).css('visibility','visible').css('opacity','1'); 
    }); 
    $("[id^=div]").mouseleave(function() { 
     $("#div"+ this.id.split("div")[1]).css('visibility','hidden').css('opacity','0'); 
    }); 
}); 
</script>

HTML

<button id="show1">x</button> 
<button id="show2">y</button> 

<div class="menu" id="div1">show</div> 
<div class="menu" id="div2">show 2</div>

来源

2014-01-08 16:29:14 user3169890

你想变得简单吗？

LIVE DEMO

$("[id^=show]").hover(function() { 
    $("#div"+ this.id.split("show")[1]).stop().fadeToggle(); 
});

所需的CSS：

#div1, #div2 { 
    position: absolute; 
         /* remove CSS animations, opacity, */ 
    display:none;  /* and use DISPLAY instead of visibility */ 
    height: 200px; 
    width: 100%; 
    background: #002061; 
    color: white; 
    z-index: 999; 
    box-shadow: inset 0 5px 16px #001031; 
}

HTML：

<button id="show1">x</button> 
<button id="show2">y</button> 

<div id="div1">show</div> 
<div id="div2">show 2</div>

否则......

DEMO

$("button[id^=show]").hover(function(e) { 
    var N = this.id.replace(/^\D+/g,''); 
    var mEnt = e.type == "mouseenter" ; // true if mouseenter, false if mouseleave 
    $("#div"+N).css({ 
    visibility: mEnt ? 'visible' : 'hidden', 
    opacity : mEnt ? 1 : 0 
    }); 
});

会抢数N出即：#show1和目标所需的#div1

或者同样喜欢：

$("button[id^=show]").hover(function(e) { 
    var m = e.type.match('t'); 
    $("#div"+ this.id.split("show")[1]).css({visibility:m?'visible':'hidden',opacity:mEnt?1:0}); 
});

来源

2014-01-07 18:01:29

这几乎适用于我需要什么。但是，当鼠标悬停在鼠标上方时，div1和div2应保持可见状态，并且在鼠标离开时隐藏。还有什么建议？ – user3169890

“是使用类选择和编写代码一样

<div id="show">show1</div> <div id="show2">show2</div>

jQuery的代码，你可以使用：

$('.main_class').mouseover(function(event) { 
var first=event.target.id; 
var second="show"+first.slice(8); 
    $("#"+second).show(); 
});

会有相似类型的在mouseout事件中代码，而不是show（）函数，你可以使用hide（），它可以是你sed适用于任何数量的元素。

来源

2014-01-07 18:08:34 ammu

使jQuery可扩展来显示和隐藏div

回答

相关问题