1
jQueryを使用してドロップダウンメニューを表示しています。それは単一のメニューのために働いていて、適切なドロップダウンを表示しています。複数のメニューを使用すると、すべてのドロップダウンメニューが表示されます。私は、jQueryで同じクラスを渡しましたが、複数のメニューで同じクラスを使用するにはどうすればよいですか。出来ますか？Jqueryでドロップダウンメニューを表示するには？
スニペットで私の出力を確認してください。 Menu-1でhoverと入力すると、Menu-2とMenu-3のドロップダウンも表示されます。私はホバーするときに1つのドロップダウンを表示する必要があります。 jQueryを手伝ってもらえますか？ここで
は私の抜粋です：
$(function() {
$(".menu").hover(
function() { $(".sub").slideToggle(400); },
function() { $(".sub").hide(); }
);
});a{
text-decoration: none;
}
.menu{
font-family: Arial;
color: #515151;
position: relative;
background-color: #763E9B;
width: 100%;
color: #fff;
}
.menu ul.main-menu{
list-style: none;
float: right;
}
.menu li.main-list {
margin: 20px;
float: left;
}
.menu li a{
color: #515151;
display: block;
padding: 10px 15px;
cursor: pointer;
font-size: 14px;
}
.menu ul.sub-options li a:hover{
background: #f44141;
color: #fff;
/*margin: 20px;*/
}
.sub{
background: #fff;
position: absolute;
z-index: 2;
width: 200px;
padding: 10px 0 3px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none;
}
a.hover-link{
font-size: 14px;
color: #fff;
z-index: 110;
display: block;
padding: 10px 0 1px 10px;
cursor:pointer;
border-radius: 5px 5px 0 0;
font-weight: bold;
}
.sub-options{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
}
.square:before {
content: "";
position: absolute;
left: 50%;
top: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0;
border-color: transparent transparent #fae0bb transparent;
z-index: 9999;
transform: translateX(-50%)
}
.square:after {
content:"";
position: absolute;
right: 4px;
top: -22px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 17px 17px 17px;
border-color: transparent transparent #ffffff transparent;
z-index:9998;
}
.square {
background: #fae0bb;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
position: absolute;
margin: 0;
/*top: 2.8em;*/
width: 200px;
z-index: 99999;
margin-top: 20px;
}
.menu:hover .square:before{
border-width: 0 10px 10px 10px;
}<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<div class='menu'>
<ul class="main-menu">
<li class="main-list"><a class='hover-link'>Menu 1</a>
<div class="square">
<div class='sub'>
<ul class='sub-options'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</li>
<li class="main-list"><a class='hover-link'>Menu 2</a>
<div class="square">
<div class='sub'>
<ul class='sub-options'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</li>
<li class="main-list"><a class='hover-link'>Menu 3</a>
<div class="square">
<div class='sub'>
<ul class='sub-options'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
あなたは.menuクラスでホバーを使用しています。別のクラスまたはIDを使用する必要があります。また、異なるサブクラスもあります。 –
Mr.Leoさんに返信してくれてありがとうございます。 –
a workarround [demo]（https://jsfiddle.net/dtzv41q2/） –