0
我正在嘗試向此Jquery下拉菜單添加延遲。我試圖使用setTimeout函數，但這似乎不起作用。試圖嚮導航菜單的Jquery下拉菜單添加延遲
我不知道爲什麼這不起作用，因爲當我將鼠標懸停在菜單上並且子菜單立即下降時，延遲不會發生。我怎樣才能使這個工作？
編輯：我必須明確說明我想要做什麼。我有一個菜單，有一些子菜單。當我將鼠標懸停在菜單項上時，例如「關於」，我想在子菜單滑出之前短暫延遲3秒。目前，它會立即滑出，當我從一個菜單項快速移動到另一個菜單項時，會產生不希望的效果。例如，如果我從關於移動到費用，它會同時顯示兩個子菜單。基本上，這是發生了什麼事，當我在滾動菜單項非常迅速
https://i.imgur.com/Nv554m9.png
我是新來的jQuery和JavaScript和一般的網絡編程，所以雖然我已經通過在計算器上幾個類似的問題了，他們似乎沒有解決我的問題。任何援助將不勝感激。
<script type="text/javascript">
$(document).ready(setTimeout(function() {
$('.dropdown').hover(
function(){
$(this).children('.dropdown-content').slideDown(200);
},
function(){
$(this).children('.dropdown-content').slideUp(0);
}
);
}), 3000);
</script>
編輯：
這是菜單
<ul id="menu">
<li><a href="index.php"> Home </a></li>
<li class="dropdown" >
<a href="about.php" class="dropbtn">About</a>
<div class = "dropdown-content">
<a href="background.php">Background And History</a>
<a href="vision.php">Vision And Mission</a>
<a href="principalmessage.php">Message From the Principal</a>
<a href="directormessage.php">Message from the Director</a>
<a href="governance.php">Governance</a>
</div>
</li>
<li class="dropdown">
<a href="admission_fees.php" class="dropbtn">Fees</a>
<div class="dropdown-content">
<a href="primaryfees.php">Primary Fees</a>
<a href="secondaryfees.php">Secondary Fees</a>
<a href="admissionform.php">Admission forms</a>
<a href="feepolicy.php">Fee Policy</a>
</div>
</li>
<li class="dropdown">
<a href="academics.php" class="dropbtn">Academics</a>
<div class="dropdown-content">
<a href="primary.php">Primary Curriculum</a>
<a href="lowersecondary.php">Lower Secondary Curriculum</a>
<a href="uppersecondary.php">Upper Secondary Curriculum</a>
<a href="library_ICT.php">Library and ICT Labs</a>
<a href="staff.php">Staff</a>
</div>
</li>
<li class="dropdown">
<a href=" school_life.php" class="dropbtn"> School Life </a>
<div class="dropdown-content">
<a href="boarding.php">Boarding School</a>
<div class="subdropdown">
<a href="extracurricular.php">Extra Curricular Activities</a>
<div class="subsubmenu">
<a href="sports.php">Sports</a>
<a href="clubs.php">Clubs</a>
<a href="entertainment.php">Entertainment</a>
</div>
</div>
<div class="subdropdown">
<a href="students.php">Students</a>
<div class="subsubmenu">
<a href="studentgovernance.php">Governance</a>
<a href="schoolrules.php">Code of Conduct</a>
<a href="alumni.php">Alumni</a>
</div>
</div>
<a href="fieldtrips.php">Field Trips</a>
</div>
</li>
<li>
<a href=" events.php "> Events </a>
</li>
<li class="dropdown">
<a href=" news.php "> News </a>
<div class="dropdown-content">
<a href="notices.php">Notices for Parents</a>
<a href="jobs.php">Jobs</a>
</div>
</li>
<li class="dropdown">
<a href=" gallery.php "> Gallery </a>
<div class="dropdown-content">
<a href="gallery_sports.php">Sports</a>
<a href="gallery_entertainment.php">Entertainment</a>
<a href="gallery_facilities.php">Facilities</a>
</div>
</li>
<li class="dropdown">
<a href=" contact.php "> Contact </a>
<div class="dropdown-content">
<a href="faq.php">FAQ</a>
</div>
</li>
<!--<li><a href="javascript:void(0);" style="font-size:20px;" class="icon" onclick="myFunction()">☰</a></li> -->
</ul>
而且CSS的HTML
/*NAVIGATION SECTION*/
nav {
margin: 0px;
}
/*Sets the nav bar in a horizontal manner. Hides the pointers for the list and ensures there's no scroll bar*/
nav ul {
display: flex;
flex-direction:row;
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
border-top: 1px solid #670000;
}
/*Styles each of the individual items in the nav bar list. Adds color and changes their font. Adds a border at the end*/
nav ul li {
flex-grow: 1;
font-family: Constantia,"Lucida Bright",Lucidabright,"Lucida Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation Serif",Georgia,serif;
font-size: 15px;
font-weight: bolder;
padding: 0;
}
/*Determines how the links inside the navbar will be displayed.Gives them a background color*/
nav ul li a {
display: block;
background: #800000;
height: 40px;
text-align:center;
padding: 7px 10px;
text-transform: uppercase;
-webkit-transition: 0.45s;
transition: 0.45s;
}
/*Shows how unvisited links will look*/
nav ul li a:link{
text-decoration: none;
color: whitesmoke;
}
/*Changes the color inside visited links*/
nav ul li a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
/*Determines what happens when you hover a link*/
nav ul li a:hover{
color: black;
background-color: white;
}
/*Shows what happens a link is active (page you are currently on)*/
nav ul li a.active {
background-color: indianred;
color: white;
}
/*Styles what happens when you hover an active link on an active page*/
nav ul li a.active:hover {
background-color: #990000;
color: white;
}
/*Dropdown stuff*/
.dropdown-content {
display: none;
position: absolute;
color: black;
min-width: 160px;
border-bottom: 0.5px solid deepskyblue;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.subsubmenu {
display: none;
position: absolute;
left: 223px;
top: 25%;
color:black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
ul li .dropdown-content a:link{
text-decoration: none;
color: whitesmoke;
}
ul li .subsubmenu a:link{
text-decoration: none;
color: black;
}
/*Changes the color inside visited links*/
ul li .dropdown-content a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
ul li .subsubmenu a:visited {
color: black;
margin-left: 60px;
height: 40px;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: black;
}
.subsubmenu a{
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: #f9f9f9;
}
.dropdown-content a:hover {
background-color: #990000;
}
.subsubmenu a:hover {
background-color: #990000;
}
/*
.dropdown:hover .dropdown-content {
display: block;
color: whitesmoke;
} */
.subdropdown:hover .subsubmenu {
display: block;
color: whitesmoke;
}
_ 「我試圖延遲添加到這個jQuery下拉。」 _時候應該延遲？你可以在問題中包含'html'嗎？ – guest271314
當某人懸停在菜單上試圖拉下子菜單時，應該發生延遲。我將發佈HTML – Lombe