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

Question

我在菜单开始时有以下内容，当按钮悬停在菜单上时显示隐藏的div，但是希望能够创建更多按钮和关联的div，而无需重复相同的jquery并仅更改id名称。

<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>

Answer 1

感谢您的帮助，这就是我最终得到的结果：

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>

JS

<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>

Answer 2

您想平淡无奇吗？

现场演示

$("[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
   }); 
});

它将从例如#show1抓取数字N并定位所需的#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}); 
});

---

Answer 3

'是的，使用类选择器并像

<button class="main_class" id="show_div1">x</button>
<button class="main_class" id="show_div2">y</button>

<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事件中将使用类似类型的代码，而不是可以使用hide（）的show（）函数，并且该代码可用于任意数量的元素。