在鼠標中心上僅顯示第一類div div

我在我的導航欄上應用了一些jquery，其中導航項是通過mysql數據庫動態生成的。它打開第一類的div，但不打開它的另一個。在div中有子菜單。在鼠標中心上僅顯示第一類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>

來源

2015-12-11 tabia

ID必須是唯一 –

@穆罕默德·優素福您指向'li_toggle' ID或'nav_toggle' – tabia

你可以在下面看到我的回答..並檢查（'body'）的部分。（'mouseenter'） –

的ID必須是唯一的jQuery得到得到它們，或者將其更改爲一個類和jQuery的將被應用到每個元素。

變化nav_toggle一類，然後使用$（「 nav_toggle」），而不是李也需要改變一類

來源

2015-12-11 21:02:01 Dan

1：我說.. ID必須是唯一的..不使用同一個ID爲一個以上的元素..使用類，而不是

...當你使用循環將打印相同的ID爲一個以上的元素，以便再次使用class=""代替id=""

第二：首先獲得 c ategory你有2種方式

..可以使用：第一選擇器

$('.categoryClass:first > div')

，也可以使用。首先（）

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

和同時使用而動態地產生的你元件循環將需要使用

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

你可以看看jQuery event delegation

注：任何事情之前，請務必包括jQuery的

來源

2015-12-11 21:05:30

在鼠標中心上僅顯示第一類div div

回答

相關問題