مسج إظهار / إخفاء Div على النقر؟

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

  •  19-09-2019
  •  | 
  •  

سؤال

أحاول استخدام JQuery لإظهار وإخفاء Div OnClick، وعلى الرغم من أنني لا أحصل على أي أخطاء، إلا أنه لا يظهر أو يخفي أي شيء أيضا.

** تحرير - تحديث **

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

});

إليك 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();
                                        }
                                } 
                        });
                    });
    }
});

وهنا العلامة: 

<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>
هل كانت مفيدة؟

المحلول

هذا يمكن أن يصبح أكثر بساطة.

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

كان خطأك الأول #nav-inner ul أين #nav-inner هو في الواقع ul جزء. ما سبق الاستيلاء على الفصل من الرابط النقر ثم يختار الطفل div.v1 مع هذه الفئة وتبديله (يظهر ذلك إذا كانت مخفية، يخفيها إن لم يكن).

نصائح أخرى

هذا مثال أبسط ..

 <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');
    }
});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top