Question

我有以下内容用于启动菜单，以便在按钮悬停时显示隐藏的div，但希望能够创建更多按钮和关联的div而无需重复相同的jquery并只更改id名称。 / p>

<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

'是的使用类选择器并编写像

这样的代码

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

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

3 个答案: