Ahora si!!
Pero ahora hay otr cosa que falla :(
Dentro del mobile-main-menu hay un dropdown de bootstrap que se desplegaba al hacer clic en él, y ahora al hacer clic en el dropdown se cierra todo.
este es el codigo del script:
Código:
<script type="text/javascript">
$("#mobile-main-menu").on("click", function(event){
event.stopPropagation();
});
$("*:not(#mobile-main-menu, #mobile-main-button)").on("click", function(){
if ($("#mobile-main-menu").is(":visible")){
$("#mobile-main-menu").slideUp();
}
});
$("#mobile-main-button").on("click", function(event){
$("#mobile-main-menu").slideToggle();
event.stopImmediatePropagation();
});
</script>
y este el codigo del menu completo:
Código:
<div class="col-xs-12 visible-xs">
<a href="#" id="mobile-main-button" class="btn btn-default visible-xs">Secciones</a>
</div>
<div class="col-xs-12 visible-xs">
<ul id="mobile-main-menu">
<li role="presentation"><a href="categoria.php">Dinero</a></li>
<li role="presentation"><a href="categoria.php">Salud</a></li>
<li role="presentation"><a href="categoria.php">Formación</a></li>
<li role="presentation"><a href="categoria.php">Tecnología</a></li>
<li role="presentation"><a href="categoria.php">Finanzas</a></li>
<li role="presentation"><a href="categoria.php">Negocios</a></li>
<li role="presentation"><a href="categoria.php">Política</a></li>
<li role="presentation"><a href="categoria.php">Deportes</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Mas<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a href="#">Categoria x</a></li>
<li role="presentation"><a href="#">Categoria x</a></li>
<li role="presentation"><a href="#">Categoria x</a></li>
<li role="presentation"><a href="#">Categoria x</a></li>
<li role="presentation"><a href="#">Categoria x</a></li>
<li role="presentation"><a href="#">Categoria x</a></li>
<li role="presentation"><a href="#">Categoria x</a></li>
<li role="presentation"><a href="#">Categoria x</a></li>
<li role="presentation"><a href="#">Categoria x</a></li>
<li role="presentation"><a href="#">Categoria x</a></li>
</ul>
</li>
</ul>
</div>
Lo que necesito es:
- si esta desplegado el dropdown y pulso fuera se cierra todo
- si no esta desplegado el dropdown y pulso fuera se cierra el menu
- si no esta desplegado el dropdown y pulso en "Mas" se despliega el dropdown (ahora mismo con lo tengo al pulsar en "mas", se cierra el menu, en vez de expandirse
Saludos y gracias!!