使用AJAX的动态下拉菜单

Question

I am now trying to build a drop down menu using Ajax.

When a mouse is placed on the navigation bar, the navigation bar calls the Ajax function so the drop down menu is shown successfully.

However, when I place my mouse over the drop down menu, the function is called multiple times so I cannot go to another website (show_activities.php) by pressing the options on the drop down menu.

Below are my codes.

The code for navigation bar:

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

The code of the php file to be called in the Ajax function: I would like to go to the same page called show_activities.php no matter which option in the drop down menu is pressed.

<?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();
?>

The 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

Use onmouseenter instead of onmouseover .

Difference between onmouseover and 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.