1
JavaScript / Ayuda con un código javascrpit
« en: 04 de Mayo de 2015, 20:05:41 pm »
hola, tengo este codigo javascript para que cuando pulse el menu se me quede abierto, pero al pulsar se me abre y se me cierra inmediatamente. Como puedo arreglarlo?.
Aqui pueden ver lo que ocurre: http://itotemusdir.blogspot.com.es/ es la triple barra naranjita de la derecha en la cabecera
Codigo:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function ($) {
$('li.content').hide();
$('ul.toggle-menu').delegate('li.toggle', 'click', function () {
$(this).next().toggle('fast').siblings('.content').hide('fast');
});
});
//@ sourceURL=pen.js
</script>
<style>
.menu-links {
float: right;
padding-right: 20px;
}
.toggle-menu {
float: right;
}
.toggle-menu li {
display: block;
float: left;
list-style-type: none;
text-align: left;
}
.toggle {
padding-top: 5px;
cursor: pointer;
}
li.toggle:hover span.toggle-menu-bar {
background-color: #ddd;
}
.toggle-menu-bar {
display: block;
width: 25px;
height: 4px;
background-color: #e58139;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin: 0 auto 3px;
transition: background-color 0.2s;
}
a {
font-size: 25px;
text-decoration: none;
color: #e58139;
padding-right: 20px;
transition: color 0.2s;
}
a:hover {
color: #ddd;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function($){
$("li.content").hide();
$("ul.toggle-menu").delegate("li.toggle", "click", function() {
$(this).next().toggle("fast").siblings(".content").hide("fast");
});
});
</script>
<header>
<div class="menu-links">
<ul class="toggle-menu">
<li class="toggle">
<span class="toggle-menu-bar"></span>
<span class="toggle-menu-bar"></span>
<span class="toggle-menu-bar"></span>
</li>
<li class="content" style="display: block;">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
</ul>
</div>
</header>
Aqui pueden ver lo que ocurre: http://itotemusdir.blogspot.com.es/ es la triple barra naranjita de la derecha en la cabecera
Codigo:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function ($) {
$('li.content').hide();
$('ul.toggle-menu').delegate('li.toggle', 'click', function () {
$(this).next().toggle('fast').siblings('.content').hide('fast');
});
});
//@ sourceURL=pen.js
</script>
<style>
.menu-links {
float: right;
padding-right: 20px;
}
.toggle-menu {
float: right;
}
.toggle-menu li {
display: block;
float: left;
list-style-type: none;
text-align: left;
}
.toggle {
padding-top: 5px;
cursor: pointer;
}
li.toggle:hover span.toggle-menu-bar {
background-color: #ddd;
}
.toggle-menu-bar {
display: block;
width: 25px;
height: 4px;
background-color: #e58139;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin: 0 auto 3px;
transition: background-color 0.2s;
}
a {
font-size: 25px;
text-decoration: none;
color: #e58139;
padding-right: 20px;
transition: color 0.2s;
}
a:hover {
color: #ddd;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function($){
$("li.content").hide();
$("ul.toggle-menu").delegate("li.toggle", "click", function() {
$(this).next().toggle("fast").siblings(".content").hide("fast");
});
});
</script>
<header>
<div class="menu-links">
<ul class="toggle-menu">
<li class="toggle">
<span class="toggle-menu-bar"></span>
<span class="toggle-menu-bar"></span>
<span class="toggle-menu-bar"></span>
</li>
<li class="content" style="display: block;">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
</ul>
</div>
</header>