私はjQueryのカスタムメニューに取り組んでおり、学習を進めています。ドロップダウンメニューを開始するまで、これまでのところほとんどの部分で問題はありませんでした。ドロップダウンのdivがリンクと重なって、リンクをクリックできなくなります。コードをテストすると、意味がわかります。どんな助けでも大歓迎です。 これがjsFiddleへのリンクです
これが私のCSSです：
li {
background-color: #ccc;
position: relative;
color: #fff;
z-index: -2;
float: left;
}
div.menu-item {
background-color: #000;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
z-index: -1;
}
a.menu-text {
display: block;
color: #fff;
margin: 0;
padding: 10px;
padding-bottom: 15px;
}
div.dropdown {
display: none;
position: absolute;
}
div.dropdown-item {
position: relative;
background-color: #1E4b55;
}
div.dropdown-item a {
padding: 10px;
padding-left: 15px;
display: block;
white-space: nowrap;
color: #fff;
}
div.dropdown-left {
height: 100%;
width: 10px;
background-color: #000;
position: absolute;
top: 0;
left: 0;
}
これが私のHTMLです
<div>
<ul>
<li>
<div class="menu-item"></div>
<a class="menu-text" href="#">text</a>
<div class="dropdown">
<div class="dropdown-item"><div class="dropdown-left"></div><a href="#">item 1</a>
</div>
<div class="dropdown-item"><a href="#">item 2</a>
</div>
<div class="dropdown-item"><a href="#">item 3</a>
</div>
</div>
</li>
<li>
<div class="menu-item"></div>
<a class="menu-text" href="#">texttexttext</a>
</li>
<li>
<div class="menu-item"></div>
<a class="menu-text" href="#">tetexttexttexttexttexttexttextxt</a>
</li>
</ul>
</div>
そして、これが私のjavascriptです：
$(function () {
$("li").hover(
function () {
$(this).find('div.menu-item').stop().animate({
height: '100%'
}, {
duration: 700,
specialEasing: {
height: 'easeOutQuint'
}
});
$(this).find('div.dropdown').slideDown();
},
function () {
$(this).find('div.menu-item').stop().animate({
height: '10px'
}, 700);
$(this).find('div.dropdown').stop().slideUp();
});
$("div.dropdown-item").hover(
function(){
$(this).find('div.dropdown-left').stop().animate({
width: '100%'
}, {
duration: 700,
specialEasing: {
width: 'easeOutQuint'
}
});
},
function(){
$(this).find('div.dropdown-left').stop().animate({
width: '10px'
}, 500);
}
);
});