Autor Tema: Ayuda con un código javascrpit  (Leído 408 veces)

Desconectado totemus

  • PHPerit@
  • *
  • Mensajes: 4
  • Karma: 0
  • Nuev@ PHPer@
    • Ver Perfil
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>

Comunidad PHPeros

Ayuda con un código javascrpit
« en: 04 de Mayo de 2015, 20:05:41 pm »

Desconectado autorojo

  • PHPer@
  • **
  • Mensajes: 59
  • Karma: 0
    • Ver Perfil
Re:Ayuda con un código javascrpit
« Respuesta #1 en: 16 de Mayo de 2015, 07:02:31 am »
Veo que ya lo has arreglado, ¿no? El problema es que pusiste dos veces el código jQuery. La primera vez antes del <style> y la segunda después del <style>. Con dejar uno de los dos funcionará correctamente.