使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

你想變得簡單嗎？

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}); 
}); 

---

Answer 3

「是使用類選擇和編寫代碼一樣

​​

<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適用於任何數量的元素。