Jquery - sichqoncha ustida tekshiruvlar mavjud emasmi: yo'q va keyin uni o'chiradi, yana o'chadi

Iltimos, maslahat bering. jQuery dan foydalanmoqdaman. Men begonman. Fadein (onclick) bilan elementlarni ko'rsatishni xohladim, keyin fadeOut bilan ularni yashirish uchun ikkinchi marta bosing. Kodimdagi xatolar nima? Gecikmeler muhim ahamiyatga ega.

JavaScript:

$(document).ready(function(){ 

    $("#btn").click(function(){ 
        if ($("sub-menu li").css('display') == 'none') {
            $("#navbar li").each(function(i) {
                $(this).delay(100 * i).fadeIn(500);
                    });
        } else {
            $("#navbar li").each(function(i) {
                $(this).delay(100 * i).fadeOut(500);
                     });
        }

    });
 });

Belgilash:

<button id="btn">CLICK ME</button>
<div class="sub-menu" id="dropDownMenu">
    
</div>

CSS:

.sub-menu {
    position: absolute;
    z-index: 1000;

}

.sub-menu li {
    display: none;
}

Mehnat fiddle bu yerda

1
Iltimos, mening javobimga qarang. Sizning sinfi selektoringizdan nuqta qoldirgan birgina xatoingiz bor edi. Men uni tuzatdim.
qo'shib qo'ydi muallif Muhammad Qasim, manba
Iltimos, ko'rish uchun tartibga soling . hozirgacha nimalarni sinab ko'rgansiz . Siz kamida bitta konturni (lekin afzalliklari bilan siz bilan bog'liq muammolarga duch kelgan kodning Minimal, Complete va Verifiable misol ) kiritishi kerak , unda muayyan muammoga yordam berishga harakat qilamiz. Shuningdek, Qanday so'raladi ni ham o'qishingiz kerak.
qo'shib qo'ydi muallif Toby Speight, manba

6 javoblar

shunga o'xshash ishlaydigan fadeToggle funktsiyasidan yaxshiroqdir

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function(){ 

        $("#btn").click(function(){ 
                        $("#navbar li").each(function(i) {
                                $(this).delay(100 * i).fadeToggle(500);
                                                });
    
 
        });
 });
.sub-menu {
    position: absolute;
    z-index: 1000;

}

.sub-menu li {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">CLICK ME</button>
<div class="sub-menu" id="dropDownMenu">
    
</div>
</div> </div>

1
qo'shib qo'ydi

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function() {

  $("#btn").click(function() {
    $("#navbar li").toggle("slow")

  });
});
.sub-menu {
  position: absolute;
  z-index: 1000;
}

.sub-menu li {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">CLICK ME</button>
<div class="sub-menu" id="dropDownMenu">
  
</div>
</div> </div>

Use .toggle()

0
qo'shib qo'ydi

Buning uchun fadeToggle dan foydalaning.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$("#btn").click(function(){ 
          $('#navbar li').fadeToggle(1000);//Yourr calculation for toggle.
 });
.sub-menu {
    position: absolute;
    z-index: 1000;

}

.sub-menu li {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">CLICK ME</button>
<div class="sub-menu" id="dropDownMenu">
    
</div>
</div> </div>

0
qo'shib qo'ydi

Muammoni hal qildim. Darhaqiqat, quyidagi selektordan nuqul nuqtali . :

 $("sub-menu li");

Yuqoridagi narsani o'zgartiring:

 $(".sub-menu li");

Sinfdan foydalanib, ba'zi elementlarni tanlashda nuqta nomini tanlash uchun nuqta foydalaning. Quyidagi fiddlega qarang ... Ular yaxshi ishlaydi.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function(){ 

        $("#btn").click(function(){ 
        if ($(".sub-menu li").css('display') == 'none') {
                        $("#navbar li").each(function(i) {
                                $(this).delay(100 * i).fadeIn(500);
                                                });
    } else {
                        $("#navbar li").each(function(i) {
                                $(this).delay(100 * i).fadeOut(500);
                                                 });
    }
        });
 });
.sub-menu {
    position: absolute;
    z-index: 1000;

}

.sub-menu li {
    display: none;
}
<button id="btn">CLICK ME</button>
<div class="sub-menu" id="dropDownMenu">
    
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</div> </div>

0
qo'shib qo'ydi
@Raziy - Iltimos, e'tiboringizni jalb qiling va javobni belgilang
qo'shib qo'ydi muallif Muhammad Qasim, manba
Juda ko'p. Qadim chog'da bu sodir bo'ladi :) Cheers!
qo'shib qo'ydi muallif Razi, manba

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function() {
  $("#btn").click(function() {
    if ($(".sub-menu li").css('display') == 'none') //. was missing here
    {
      $("#navbar li").each(function(i) {
        $(this).delay(100 * i).fadeIn(500);
      });
    } else {
      $("#navbar li").each(function(i) {
        $(this).delay(100 * i).fadeOut(500);
      });
    }

  });
});
.sub-menu {
  position: absolute;
  z-index: 1000;
}

.sub-menu li {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">CLICK ME</button>
<div class="sub-menu" id="dropDownMenu">
  
</div>
</div> </div>

0
qo'shib qo'ydi
Bu noobish edi :) Thx.
qo'shib qo'ydi muallif Razi, manba

Buni ko'ring,

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function(){ 

        $("#btn").click(function(){ 
        $(".sub-menu").fadeToggle( "slow", "linear" );
        });
 });
.sub-menu {
    position: absolute;
    z-index: 1000;

}

.sub-menu {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">CLICK ME</button>
<div class="sub-menu" id="dropDownMenu">
    
</div>
</div> </div>

Fadetoggle hujjatlari uchun havolasi .

0
qo'shib qo'ydi