I want to have a simple mobile compatible menu that toggles(fadeIn or out) on click or tap. But when the user clicks the list elements the toggle from the wrapper element fires and collapse the whole menu. I tried z-index but the same thing happens.
EDIT: I added a JSFiddle for better understanding (link below)
Lets take a look at my code:
HTML
<ul class="menu" id="menu-menue-1">
<li class="many other wp classes" id="menu-item-140"><a href="http://127.0.0.1/staging/">Startseite</a></li>
<li class="many other wp classes" id="menu-item-144"><a href="http://127.0.0.1/staging/shop/">Shop</a></li>
<li class="many other wp classes" id="menu-item-251"><a href="http://127.0.0.1/staging/category/news/">Team</a></li>
<li class="many other wp classes" id="menu-item-162"><a href="http://127.0.0.1/staging/warenkorb/">Warenkorb</a></li>
</ul>
CSS
#menu-menue-1 {
cursor: pointer;
position: fixed;
color: #565656;
display: block;
width: 48px;
height: auto;
min-width: 48px;
position: fixed;
top: 20px;
left: 20px;
padding-top: 58px;
background-image: url('../images/nav_active.png');
background-repeat: no-repeat;
background-position: 0 0;
z-index: 1;
}
#menu-menue-1 li {
min-width: 38px;
height: 30px;
text-transform: uppercase;
background: #efefef;
font-family: 'Titillium Web', sans-serif;
font-weight: 600;
font-size: 1em;
color: #c0c0c0;
margin: 0 0 5px 0;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
padding: 10px 0 10px 12px;
}
#menu-menue-1 li a{
display: none;
height: 30px;
padding: 2px 10px 10px 5px;
}
.navli-a-active{
display: block;
width: 140px !important;
}
.navli-active{
width: 170px;
height: 30px;
color: #565656;
-webkit-box-shadow:inset 4px 0 0 #DE3F3F;
-moz-box-shadow:inset 4px 0 0 #DE3F3F;
box-shadow:inset 4px 0 0 #DE3F3F;
-webkit-border-radius: 2px;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 2px;
-moz-border-radius-topleft: 0;
-moz-border-radius-bottomleft: 0;
border-radius: 2px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
background: #efefef url('../images/nav_hover.png') no-repeat 162px center;
}
JS
(function(a) {
(jQuery.browser = jQuery.browser || {}).mobile = /(android|ipad|playbook|silk|android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))
})(navigator.userAgent || navigator.vendor || window.opera);
console.log('Mobiles Gerät: ' + jQuery.browser.mobile);
$("#menu-menue-1").bind(jQuery.browser.mobile ? 'click' : 'tap', function() {
$(this).find('li').fadeToggle(500);
});
$("#menu-menue-1 li").bind(jQuery.browser.mobile ? 'click' : 'tap', function() {
$(this).toggleClass('navli-active');
$(this).find('a').toggle();
});
FYI:
I am using jQuery 1.10.2 and jQuery Mobile custom min build. Both work correctly and do what they should do.
**JSFIDDLE: http://jsfiddle.net/wzk8j8pL/8/ **
My Question:
What am I doing wrong? Why is the toggle bubbling up?
PS: sorry for my bad english and thx in advance :)
event.stopPropagation to the rescue.
var menu = $('#menu-menue-1');
var list = $('li', menu);
menu.on('click', function() {
list.fadeToggle(500);
});
list.on('click', function(e) {
e.stopPropagation();
$(this).toggleClass('navli-active');
$(this).find('a').toggle();
});
This won't solve all of your problems, though. After having looked through your code my advice would be to do something like this for your list handler:
list.on('click', function(e) {
e.stopPropagation();
list.not(this).removeClass('navli-active');
$(this).toggleClass('navli-active');
});
And then for your a active state, just use CSS:
#menu-menue-1 li.navli-active a{
display: block;
width: 140px;
}