javascript - 仅在 mouseenter 上显示第一个类别的 div

Question

我在我的导航栏上应用了一些 jquery，其中导航项是通过 mysql 数据库动态生成的。它打开第一个类别的 div，但不会为另一个类别打开它。在 div 中有子菜单。

导航

<div class="col-md-3">
   <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">CATEGORIES</a></li>
           <?php
                $res=mysqli_query($con,"SELECT * FROM category");
                while($row=mysqli_fetch_array($res))
                {
                    ?>
           <li id="li_toggle">
            <a href="#" ><?php echo $row['cat_name'] ?></a>
            <div id="nav_toggle" style="display: none">
        <ul>
             <?php
         $result=mysqli_query($con,"SELECT * FROM subcategory WHERE cat_id=".$row['cat_id']);
         while($row1=mysqli_fetch_array($result))
       {
         ?>
        <li>
        <a href="index.php?page=items&category=<?php echo $row1['s_cat_name'] ?>&s_cat_id=<?php echo $row1['s_cat_id'] ?>&cat_id=<?php echo $row1['cat_id'] ?>">
          <?php echo $row1['s_cat_name'] ?>
        </a>
        </li>

       <?php
        }
       ?>
         </ul>
      </div>
   </li>
   <?php
       }
      ?>
     </ul>
     </div>

Jquery

<script>

$(document).ready(function (e) {
        $("#li_toggle").mouseenter(function (e) {
            $('#nav_toggle').show("slide", {
                direction: "right"
            }, 2000);
            $('.p123h').css({
                "position": "absolute",
                "z-index": "1"
            });
        });
        $("#li_toggle").mouseout(function (e) {
            $('#nav_toggle').hide("slide", {
                direction: "left"
            }, 2000);
            $('.p123h').css({
                "position": "absolute",
                "z-index": "-1"
            });
        });
    });
</script>

Answer 1

Id 必须是唯一的，jquery 才能获取它们，或者将它们更改为一个类，jquery 将应用于每个元素。

将 nav_toggle 更改为一个类，然后使用 $(".nav_toggle") 而不是 li 也需要更改为一个类