Skip to main content

heHe hecho una funcionalidad para poder ocultar un menumenú por medio de jquery.

La primera parte del codigocódigo, es decir la de ocultar, funciona perfectamente, pero la segunda parte, aunque funciona, carga la pagina, cuando mi intencionintención es que lo haga sin cargarla pagina.

¿Como podriapodría mejorar el codigocódigo para que no cargase la paginapágina?

JQUERYJQUERY

El codigo htmlcódigo HTML es demasiado extenso asiasí que pongo lo que creo que os puede ayudar a identificar el problema

he hecho una funcionalidad para poder ocultar un menu por medio de jquery.

La primera parte del codigo, es decir la de ocultar, funciona perfectamente, pero la segunda parte, aunque funciona, carga la pagina, cuando mi intencion es que lo haga sin cargarla pagina.

¿Como podria mejorar el codigo para que no cargase la pagina?

JQUERY

El codigo html es demasiado extenso asi que pongo lo que creo que os puede ayudar a identificar el problema

He hecho una funcionalidad para poder ocultar un menú por medio de jquery.

La primera parte del código, es decir la de ocultar, funciona perfectamente, pero la segunda parte, aunque funciona, carga la pagina, cuando mi intención es que lo haga sin cargarla pagina.

¿Como podría mejorar el código para que no cargase la página?

JQUERY

El código HTML es demasiado extenso así que pongo lo que creo que os puede ayudar a identificar el problema

Origen Enlace
KurodoAkabane
  • 533
  • 1
  • 8
  • 19

Problema al mostrar y ocultar boton. Carga la pagina

he hecho una funcionalidad para poder ocultar un menu por medio de jquery.

La primera parte del codigo, es decir la de ocultar, funciona perfectamente, pero la segunda parte, aunque funciona, carga la pagina, cuando mi intencion es que lo haga sin cargarla pagina.

¿Como podria mejorar el codigo para que no cargase la pagina?

JQUERY

<script type="text/javascript" >
$(document).ready(function(){
    

    $('#ocultaropciones').click(function(e){

        var urlaocultar = '<a href="" class="btn btn-info" id="mostraropciones" >Mostrar opciones</a>';
                            $('#contenidoDerecha').attr('class','col-md-12');
                            $('#menuizquierdo').hide();
                            $('#opcionesListado').html(urlaocultar);
                            e.preventDefault(); 
                        //  $('#ocultaropciones').parents().text(urlaocultar); 
                            

    });
    $('#mostraropciones').click(function(b){
        b.preventDefault(); 
        var urlamostrar = '<a href="" class="btn btn-info" id="ocultaropciones" >Ocultar opciones</a>';
                            $('#menuizquierdo').show();
                            $('#opcionesListado').html(urlamostrar);
                            
    });
})
    
</script>

El codigo html es demasiado extenso asi que pongo lo que creo que os puede ayudar a identificar el problema

<div class="col-md-12">
                        <div class="panel panel-default ">
                            <!-- <div class="panel-heading">
                                <h3 class="panel-title">Panel title</h3>
                            </div> -->
                            <div class="panel-body">
                                    
                                                        
                            <div class="row">
                                <div class="col-md-2" id="menuizquierdo">
                                      <div class="panel panel-default">

                                        <div class="panel-heading">Opciones</div>
                                          <div class="panel-body text-center">
                                           <ul>
                                               <li><a href="">opcion_1</a></li>
                                               <li><a href="">opcion_2</a></li>
                                               <li><a href="">opcion_3</a></li>
                                               <li><a href="">opcion_4</a></li>
                                               <li><a href="">opcion_5</a></li>
                                               <li><a href="">opcion_6</a></li>
                                               <li><a href="">opcion_7</a></li>
                                               <li><a href="">opcion_8</a></li>
                                               <li><a href="">opcion_9</a></li>
                                               <li><a href="">opcion_10</a></li>
                                               <li><a href="">opcion_11</a></li>
                                               <li><a href="">opcion_12</a></li>
                                               <li><a href="">opcion_13</a></li>
                                               <li><a href="">opcion_14</a></li>
                                               <li><a href="">opcion_15</a></li>
                                               <li><a href="">opcion_16</a></li>
                                               <li><a href="">opcion_17</a></li>
                                               <li><a href="">opcion_18</a></li>
                                               <li><a href="">opcion_19</a></li>
                                               <li><a href="">opcion_20</a></li>
                                         </ul>
                                        </div>
                           
                                       
                                    </div>
                                   
                                </div>


                                <div class="col-md-10" id="contenidoDerecha">
                                 
  <div id="espacio100"></div>

<div class="col-md-2" id="opcionesListado">
                        <a href="" class="btn btn-info" id="ocultaropciones" >Ocultar opciones</a>
                        
                    </div>