jquery - 點擊檢查li項是否顯示：none然後淡入，否則淡出

-1

請指教。我正在使用jQuery。我是begginer。我想用fadeIn（onclick）顯示項目，然後點擊第二次以用fadeOut隱藏它們。我的代碼有什麼問題？延遲很重要。jquery - 點擊檢查li項是否顯示：none然後淡入，否則淡出

的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); 
        }); 
     } 

    }); 
});

標記：

<button id="btn">CLICK ME</button> 
<div class="sub-menu" id="dropDownMenu"> 
    <ul id="navbar"> 
     <li>ONE</li> 
     <li>TWO</li> 
     <li>THREE</li> 
     <li>FOUR</li> 
     <li>FIVE</li> 
    </ul> 
</div>

CSS：

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

} 

.sub-menu li { 
    display: none; 
}

Working fiddle here

來源

2017-03-09 Razi

請參閱我的答案。你只有一個錯誤，你錯過了你的類選擇器中的點。我修好了。 –

請[編輯]你的問題，以顯示[你到目前爲止嘗試過的]（http://whathaveyoutried.com）。你至少應該包括一個你遇到問題的代碼大綱（但最好是[mcve]），然後我們可以嘗試幫助解決具體問題。你還應該閱讀[問]。 –

$(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"> 
 
    <ul id="navbar"> 
 
    <li>ONE</li> 
 
    <li>TWO</li> 
 
    <li>THREE</li> 
 
    <li>FOUR</li> 
 
    <li>FIVE</li> 
 
    </ul> 
 
</div>

來源

2017-03-09 10:17:30

這是不好的:) Thx。 – Razi

更好aprouch是fadeToggle功能，工作原理是這樣

$(document).ready(function(){ 
 

 
\t $("#btn").click(function(){ 
 
    \t \t \t $("#navbar li").each(function(i) { 
 
    \t \t \t \t $(this).delay(100 * i).fadeToggle(500); 
 
\t \t \t \t \t \t }); 
 
    
 
    
 
\t }); 
 
});

.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"> 
 
    <ul id="navbar"> 
 
     <li>ONE</li> 
 
     <li>TWO</li> 
 
     <li>THREE</li> 
 
     <li>FOUR</li> 
 
     <li>FIVE</li> 
 
    </ul> 
 
</div>

來源

2017-03-09 10:19:34

試試這個，

$(document).ready(function(){ 
 

 
\t $("#btn").click(function(){ 
 
    \t $(".sub-menu").fadeToggle("slow", "linear"); 
 
\t }); 
 
});

.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"> 
 
    <ul id="navbar"> 
 
     <li>ONE</li> 
 
     <li>TWO</li> 
 
     <li>THREE</li> 
 
     <li>FOUR</li> 
 
     <li>FIVE</li> 
 
    </ul> 
 
</div>

以下是關於fadetoggle文檔的link。

來源

2017-03-09 10:19:42 rahulsm

爲此目的使用fadeToggle。

$("#btn").click(function(){ 
 
    \t $('#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"> 
 
    <ul id="navbar"> 
 
     <li>ONE</li> 
 
     <li>TWO</li> 
 
     <li>THREE</li> 
 
     <li>FOUR</li> 
 
     <li>FIVE</li> 
 
    </ul> 
 
</div>

來源

2017-03-09 10:19:57

$(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"> 
 
    <ul id="navbar"> 
 
    <li>ONE</li> 
 
    <li>TWO</li> 
 
    <li>THREE</li> 
 
    <li>FOUR</li> 
 
    <li>FIVE</li> 
 
    </ul> 
 
</div>

使用.toggle()

來源

2017-03-09 10:20:25 guradio

我已經解決了這一問題。其實你錯過了點。從以下選擇：

$("sub-menu li");

更改上述給：

$(".sub-menu li");

當選擇使用類的一些元素，使用點類名之前來選擇。看到下面的小提琴。它工作正常。

$(document).ready(function(){ 
 

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

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

 
} 
 

 
.sub-menu li { 
 
    display: none; 
 
}

<button id="btn">CLICK ME</button> 
 
<div class="sub-menu" id="dropDownMenu"> 
 
    <ul id="navbar"> 
 
     <li>ONE</li> 
 
     <li>TWO</li> 
 
     <li>THREE</li> 
 
     <li>FOUR</li> 
 
     <li>FIVE</li> 
 
    </ul> 
 
</div> 
 

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

來源

2017-03-09 10:27:59

Thx多。當你變老時會發生這種情況:)乾杯！ – Razi

@Razi - 請注意並標記答案，以便其他人可以受益:) –

jquery - 點擊檢查li項是否顯示：none然後淡入，否則淡出

回答

相關問題