javascript - 使用 AJAX 的动态下拉菜单

Question

我现在正尝试使用 Ajax 构建下拉菜单。

当鼠标放在导航栏上时，导航栏会调用Ajax函数，从而成功显示下拉菜单。

但是，当我将鼠标放在下拉菜单上时，该函数会被多次调用，因此我无法通过按下拉菜单上的选项转到另一个网站 (show_activities.php)。

下面是我的代码。

导航栏代码:

<script type="text/javascript">
  if(window.location.href.indexOf("/index.html") > -1) {
   $('#page-item-1').addClass('current_page_item');
 }
 if(window.location.href.indexOf("/news.html") > -1) {
   $('#page-item-2').addClass('current_page_item');
 }
 if(window.location.href.indexOf("/album.html") > -1){
   $('#page-item-3').addClass('current_page_item');
 }
 if(window.location.href.indexOf("/services.html") > -1) {
   $('#page-item-4').addClass('current_page_item');
 }
 if(window.location.href.indexOf("/green.html") > -1) {
   $('#page-item-5').addClass('current_page_item');
 }
 if(window.location.href.indexOf("/contact.html") > -1) {
   $('#page-item-6').addClass('current_page_item');
 }

 function showYear() {
  $.ajax
   ({
     type:'post',
     url:'activities/activities_year.php',
 success:function(response) {
     if(response!="")
     {
      $("#page-item-2>#activities_dropdown").html(response);
     }
   }
   });
}
</script>
<nav id="access" role="navigation">
  <div class="menu">
    <ul>
      <li id="page-item-1" class="page_item page-item-1"><a href="index.html" title="Home">Home</a></li>
      <li id="page-item-2" class="page_item page-item-2 dropdownlist" onmouseover="showYear()"><a href="" class="dropbtn">News and Events</a>
        <div class="dropdown-album" id="activities_dropdown" ></div>
      </li>
      <li id="page-item-3" class="page_item page-item-3"><a href="album.html">Album</a></li>
      <li id="page-item-4" class="page_item page-item-4"><a href="services.html">Services</a></li>
      <li id="page-item-5" class="page_item page-item-5"><a href="green.html">Green Corner</a></li>
      <li id="page-item-6" class="page_item page-item-6"><a href="contact.html">Contact us</a></li>
    </ul>
  </div>
</nav>

Ajax函数中要调用的php文件代码:无论按下下拉菜单中的哪个选项，我都想转到名为 show_activities.php 的同一页面。

<?php 
    $conn=mysqli_connect("localhost","root","","mpresident");
    if($conn->connect_error)
    {
        echo "Unable to connect to database"; exit; 
    }
    $query1="select YEAR(ActivityDate) as year from activitiesinfo DES";
    $result1=$conn->query($query1);
    if(!$result1)die("No information");
    $result1->data_seek(0);
    //echo "<script type=\"text/javascript\">";
    while($row=$result1->fetch_assoc())
    {
        //echo "<span id='activities".$row["year"]."'>".$row["year"]."</span>";
        echo "<a href='activities/show_activities.php'>".$row["year"]."</a>";
    }
    //echo "</script>";
    $result1->free();
    $conn->close();
?>

CSS:

@font-face {
  font-family: 'cwTeXHei';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.ttf) format('truetype');
}
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 8px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 50%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}



/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    text-decoration: none;
}

li a:hover, .dropdownlist:hover .dropbtn {

}

li.dropdownlist {
    display: inline-block;
}

.dropdown-album {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-album a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-album a:hover {background-color: #f1f1f1}

.dropdownlist:hover .dropdown-album {
    display: block;
}
form{
  border: 1px;
  width: 400px;
  margin:auto;
}

button.login-button {
    background-color: white;
    color: black;
    padding: 5px 5px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 20%;
}

The Ajax function is called more than once

Answer 1

使用 onmouseenter 而不是 onmouseover。

onmouseover 和 onmouseenter 的区别:

The onmouseover event occurs when the mouse pointer is moved onto an element, or onto one of its children.

The onmouseenter event occurs when the mouse pointer is moved onto an element.