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之间的差异：

将鼠标指针移动到某个元素或其中一个子元素上时会发生onmouseover事件。

将鼠标指针移动到元素上时会发生onmouseenter事件。

使用AJAX的动态下拉菜单

1 个答案: