javascript - How to make the whole div clickable - Stack Overflow

admin管理员组

文章数量:1391937

I'm making a menu and have one simple and stupid issue. The problem is: I have my <span> elements inside a 'Menu' div. With id '#menu'. I've made a feature by which you can't accidentally click on the <a> inside the <span> through CSS visibility. But now if you click the menu in space between white stripes, it won't act like a button.

So the question is: 'How to make this <div> fully clickable?'

Here's the Fiddle.

Thanks in advance.

I'm making a menu and have one simple and stupid issue. The problem is: I have my <span> elements inside a 'Menu' div. With id '#menu'. I've made a feature by which you can't accidentally click on the <a> inside the <span> through CSS visibility. But now if you click the menu in space between white stripes, it won't act like a button.

So the question is: 'How to make this <div> fully clickable?'

Here's the Fiddle.

Thanks in advance.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 17, 2016 at 12:41 Nitin9791 1,14411 gold badge1414 silver badges1818 bronze badges asked Sep 17, 2016 at 11:14 MaxelRusMaxelRus 30511 silver badge1010 bronze badges 1

• 2 Please post your code in the question, not just a link to it. – Bergi Commented Sep 17, 2016 at 14:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

It can be simply do with width property, just need to add a width to the menu div:

#menu {
    -moz-user-select: none;
    height: 40px;
    margin: 50px;
    position: absolute;
    width: 40px; /* newly added */
}

Instead of keeping fixed width, we can also use the width to 100% which gives you more clickable area to collapse the menu

#menu {
  position: absolute;
  height: 40px;
  width : 100%; /*newly added*/
  margin: 50px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none
}

本文标签： javascriptHow to make the whole div clickableStack Overflow