javascript - 尝试为导航菜单的 Jquery 下拉列表添加延迟

Question

我正在尝试为此 Jquery 下拉列表添加延迟。我已尝试使用 setTimeout 函数，但这似乎不起作用。

我不知道为什么这不起作用，因为当我将鼠标悬停在菜单上并且子菜单立即下拉时不会发生延迟。我怎样才能让它发挥作用？

编辑:我必须明确说明我想做什么。我有一个带有一些子菜单的菜单。当我将鼠标悬停在菜单项上时，例如“关于”，我希望在子菜单滑出之前有 3 秒的短暂延迟。目前，它会立即滑出，这会在我快速从一个菜单项移动到另一个菜单项时产生不良影响。例如，如果我从关于转到费用，它会同时显示两个子菜单。基本上这就是当我快速滚动菜单项时发生的事情

https://i.imgur.com/Nv554m9.png

我是 Jquery 和 Javascript 以及一般网络编程的新手，所以尽管我在 StackOverFlow 上回答了几个类似的问题，但它们似乎并没有解决我的问题。任何帮助将不胜感激。

<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>

编辑:

这是菜单的HTML

<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&nbspLife </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()">&#9776;</a></li> -->
</ul>  

和 CSS

/*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;
}

Answer 1

$(document).ready(setTimeout(function(){}, 3000))不耽误.slideDown()在 .hover() 调度的每个事件中调用;相反，延迟调用传递给 setTimeout() 的函数在.ready()调用3000 .

您可以使用 .delay() .也可以调用 .clearQueue()链接到 $(this).children('.dropdown-content')在函数传递给 .hover() 的第二个参数清除 .slideDown() 的元素队列在第一个参数处调用。

$(document).ready(function() {
  $('.dropdown').hover(
    function() {
      $(this).children('.dropdown-content')
        .delay(1000) // set duration of delay in milliseconds here
        .slideDown(200);
    },
    function() {
      $(this).children('.dropdown-content')
      .clearQueue()
      .slideUp(0);
    })
});

/*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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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&nbspLife </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()">&#9776;</a></li> -->
</ul>