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

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

将nav_toggle更改为某个类，然后使用$（＆＃34; .nav_toggle＆＃34;），而li也需要更改为类

Answer 2

1st：正如我所说..我必须是唯一的..不要对多个元素使用相同的ID ..使用类来代替

...当您使用循环时，它会为多个元素打印相同的ID，因此请再次使用class=""代替id=""

第二名：获得第一类有两种方式

..你可以使用：第一个选择器

$('.categoryClass:first > div')

或者您可以使用.first（）

$('.categoryClass').first().find('> div')

当你使用while循环来动态生成元素时，你需要使用

$('body').on('mouseenter', '.categoryClass' , function(){
   //code here
});

您可以查看jQuery event delegation

注意：在任何事情之前请务必包含jquery

在mouseenter上仅显示第一类的div

2 个答案: