jquery zeigen / verstecken div auf Klick?

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

  •  19-09-2019
  •  | 
  •  

Frage

Ich versuche, Jquery zu verwenden, um zu zeigen, und versteckt einen div Onclick, und obwohl ich keine Fehler bin immer, es ist nicht blendet alles nicht.

** EDIT - AKTUALISIERT ** 

$(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;
    });

});

Hier ist die 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();
                                        }
                                } 
                        });
                    });
    }
});

Und hier ist das Markup: 

<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>
War es hilfreich?

Lösung

Das kann viel einfacher gemacht werden. 

$(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;
  });
});

Ihr erster Fehler war #nav-inner ul wo #nav-inner ist eigentlich das ul Element. Die oben genannten Greifer die Klasse von dem geklickten Link und wählen dann das Kind von div.v1 mit dieser Klasse und schaltet sie (zeigt es, wenn versteckt, versteckt es, wenn nicht).

Andere Tipps

Dies ist ein einfacheres Beispiel .. 

 <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');
    }
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top