如何創建一個jQuery函數？

我有一個完美的第一和第二級菜單，但我需要更深入地展示所有子級別。也許最好使用JQuery函數，但我不知道如何！菜單是這樣的，當它加載：如何創建一個jQuery函數？

UPDATE
產生子級別的代碼：

foreach ($categories as $category) { 
    $data['x'] .= '<li><a class=' . $category['category_id'] . ' id=' . $category['category_id'] . ' data-id=' . $category['category_id'] . '>' . $category['name'] . '</a></li>'; 
}

產生ROOT類代碼：

<ul id="mnav" style="padding-top: 80px; background-color: #337ab7;"> 
    <?php foreach ($categories as $category) { ?> 
    <li><a id="<?php echo $category['category_id']; ?>" class="list-group-item active"><?php echo $category['name']; ?></a></li> 
    <?php } ?> 
</ul>

編譯PHP - HTML：

<ul id="mnav" style="padding-top: 80px; background-color: #337ab7;"> 
    <li><a id="24" class="list-group-item active">Machinery</a> 
     <ul class="sub" id="sub1"> 
      <li><a class="2420" id="2420" data-id="2420">Agriculture Machinery Equipment</a></li> 
      <li><a class="2407" id="2407" data-id="2407">Apparel Textile Machinery</a></li> 
      <li><a class="2409" id="2409" data-id="2409">Building Material Machinery</a></li> 
      <div class="list-group"> </div> 
     </ul> 
    </li> 
    <li><a id="29" class="list-group-item active">Packaging &amp; Printing</a></li> 
    <li><a id="26" class="list-group-item active">Mechanical Parts &amp; Fabrication Services</a></li> 
</ul>

要做到這一點，我使用的是這樣一個腳本：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('ul#mnav > li > a').on('click', function(e) { 
      console.log("Level 1"); 
      e.preventDefault(); 
      var cat = $(this).attr('id'); 
      var url = 'index.php?route=test/categoryx/child&category_id=' + cat; 

      $('#mnav #sub1').remove(); 
      $($("<ul class='sub' id='sub1'>").load(url + "#myContainer")).insertAfter('#mnav #' + cat); 
     }); 

     $('ul#sub1 a').on('click', function(e) { 
      console.log("Level 2"); 
      e.preventDefault(); 
      var cat = $(this).attr('id'); 
      var url = 'index.php?route=test/categoryx/child&category_id=' + cat; 

      $('#sub2').remove(); 
      $($("<ul class='sub' id='sub2'>").load(url + "#myContainer")).insertAfter('ul#sub1 #' + cat); 
     }); 
</script>

我嘗試了不同的方式來獲得進入第二級，但它不是成功的，我嘗試了許多不同的事情。

來源

2017-05-27 Kardo

你不必使用'ID = 「SUB1」任何元素'或'ID =「mnav 「'。這就是爲什麼onclick函數不會激怒的原因。 –

請加上一個編譯的PHP，因爲我看不到'mnav'在html –

這可能是一個PHP問題，而不是你的標籤？ –

你可以試試：

$(".drop").on("click", "li", function (event) { 
    console.log('a'); 
});

或者使用find（）函數：

$(".drop").find("li").click(function(){ 
    alert("You clicked on li " + $(this).text()); 
});

來源

2017-05-27 17:19:36 max

我不明白什麼是「.drop」，但無論如何，我嘗試了「＃sub1」，而沒有發生任何事情。 – Kardo

如何創建一個jQuery函數？

回答

相關問題