[英]How to limit the clickable area of this menu to its text?
Why is the whole width clickable and how can I change that? 为什么整个宽度都是可点击的,我该如何更改?
Obviously the only clickable area should be the text when visible, nothing else. 显然,唯一可单击的区域应该是可见的文本,没有别的。
I've tried display: inline-block but it messed up the menu. 我试过display:inline-block但它弄乱了菜单。
Thanks. 谢谢。
HTML 的HTML
<div class="wrapper">
<ul>
<li class="menu-level-1"><a href="#">Item 1</a>
<ul class="menu-level-2">
<li><a href="#">Item 1-1</a></li>
<li><a href="#">Item 1-2</a></li>
</ul>
</li>
<li class="menu-level-1"><a href="#">Item 2</a>
<ul class="menu-level-2">
<li><a href="#">Item 2-1</a>
<ul class="menu-level-3">
<li><a href="#">Item 2-1-1</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-level-1"><a href="#">Item 3</a>
<ul class="menu-level-2">
<li><a href="#">Item 3-1</a></li>
<li><a href="#">Item 3-2</a></li>
<li><a href="#">Item 3-3</a></li>
</ul>
</li>
<li class="menu-level-1"><a href="#">Item 4</a>
<ul class="menu-level-2">
<li><a href="#">Item 4-1</a></li>
<li><a href="#">Item 4-2</a></li>
</ul>
</li>
</ul>
</div>
CSS 的CSS
body{
margin: 0px;
border: 0;
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0;
color: #000000;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 120px;
top: 0;
display: none;
}
ul li a {
text-decoration: none;
color: #000000;
}
.menu-level-1 {
position: relative;
top: 20px;
left: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 15px;
letter-spacing: 0em;
text-transform: uppercase;
}
.menu-level-2 {
position: fixed;
top: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 15px;
letter-spacing: 0em;
text-transform: uppercase;
}
The whole width is clickable because li elements have the list-item display, whose behavior specifies that their width is 100%. 整个宽度都是可单击的,因为li元素具有列表项显示,其行为指定其宽度为100%。 This is misleading because only the anchor tags have the pointer cursor. 这是一种误导,因为只有锚标记具有指针光标。
I updated your fiddle ( http://jsfiddle.net/180xhfwk/2/ ) with the following: 我用以下内容更新了您的小提琴( http://jsfiddle.net/180xhfwk/2/ ):
$('.menu-level-1 a').on('click', function() {
var parent = $(this).parent();
...
});
It now binds the click listener to the the anchor tags themselves, rather than the .menu-level-1 things and functions as I think you expect it to. 现在,它将单击侦听器绑定到锚标记本身,而不是像我想的那样将.menu-level-1事物和功能绑定。
Just change your CSS and use display: table. 只需更改您的CSS并使用display:table。
ul li {
position: relative;
display: table;
}
Instead of using click event for li , use click event for anchor and in traversing use parent() 与其对li使用click事件, 不如对锚使用click事件,而在遍历中使用parent()
Jquery: jQuery:
$('.menu-level-2').hide();
$('.menu-level-1 > a').on('click', function(){
if(!($(this).parent().children('.menu-level-2').is(':visible'))){
$('.menu-level-2').slideUp();
$(this).parent().children('.menu-level-2').slideDown();
} else {
$('.menu-level-2').slideUp();
}
});
$('.menu-level-2').on('click', function(e){
e.stopPropagation();
});
here is the JSFiddle: http://jsfiddle.net/180xhfwk/4/ 这是JSFiddle: http : //jsfiddle.net/180xhfwk/4/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.