jquery mostrar / ocultar div al hacer clic?

StackOverflow https://stackoverflow.com/questions/2235426

  •  19-09-2019
  •  | 
  •  

Pregunta

Estoy tratando de utilizar jQuery para mostrar y ocultar un div onclick, y, aunque no estoy recibiendo ningún error, no es mostrar u ocultar nada.

** EDITAR - ACTUALIZADO ** 

$(document).ready(function() {    
        $("#nav-inner a").click(function() {
            var type = $(this).attr("class");
                $("div.v1 > div").not("." + type).stop().hide().end().filter("." + type).stop().show();
                return false;
    });

});

Aquí está el jQuery: 

$(document).ready(function() {
        if($("#nav-inner")) {
                $("#nav-inner ul li a").click(function(evt) {
                        var type = $(this).attr("class");
                        var rowcount = 0;
                        $('div.v1 .vc').each(function(idx,el) {
                                if(type == 'typea') {
                                    if($(el).hasClass('typea')) {
                                                $(el).show();
                                        } else {
                                                $(el).hide();
                                        }
                                } 
                        });
                    });
    }
});

Y aquí está el marcado: 

<div id="page">
    <div id="header">
        <div id="nav">
            <div id="nav-inner">
                <ul class="nav-inner-li">
                    <li>
                        <a class="typea" href="#"><img src="/images/typea.png"></a>
                        <a class="typea" href="#">Type A</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div id="content">
        <div id="content-content">
            <div id="content-left">
                <div class="v1">
                    <div class="vc">
                        <div class="typea">
                            <div class="title"> Title </div>
                            <div class="body"> Body </div>
                        </div>

                        <div class="typeb">
                            <div class="title"> Title 2 </div>
                            <div class="body"> Body 2 </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
¿Fue útil?

Solución

Esto puede hacerse mucho más simple. 

$(function() {
  $("#nav-inner a").click(function() {
    var type = $(this).attr("class");
    $("div.vc > div").not("." + type).stop().hide()
      .end().filter("." + type).stop().show();
    return false;
  });
});

Su primer error fue #nav-inner ul donde #nav-inner es en realidad el elemento ul. Lo anterior toma la clase desde el enlace se hace clic y se selecciona el niño de div.v1 con esa clase y alterna ella (muestra si oculta, esconde si no).

Otros consejos

Este es un ejemplo más simple .. 

 <script>
      $(document).ready(function(){
            $('#divtag').click(function(){  //use # for id and . for class
                $('#insidetag').show();     // with parameters slow,fast, or a time in milisecond
            });                             // use toggle to show and hide 
        });
    </script>

<body>
    <div id="divtag">
        <div id="insidetag">
            Click the hide and show
        </div>
    </div>
</body>


jQuery(".user-profile-info").unbind().click(function(){
    if(jQuery( ".user-profile-info" ).hasClass("collapsed")){
        jQuery('#user-profile-submenu').css('display', 'block');
        jQuery( ".user-profile-info" ).removeClass("collapsed");
    }
    else
    {       
        jQuery( ".user-profile-info" ).addClass("collapsed");
        jQuery('#user-profile-submenu').css('display', 'none');
    }
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top