Javascript 如何创建jQuery函数？_Javascript_Jquery_Ajax

Javascript 如何创建jQuery函数？

javascript jquery ajax

Javascript 如何创建jQuery函数？,javascript,jquery,ajax,Javascript,Jquery,Ajax,我有一个菜单，它只适用于第一级和第二级，但我需要更深入地显示所有子级。也许使用JQuery函数更好，但我不知道如何使用！加载时，菜单如下所示：更新生成子级别的代码： foreach ($categories as $category) { $data['x'] .= '<li><a class=' . $category['category_id'] . ' id=' . $category['category_id'] . ' data-id=' . $cate

我有一个菜单，它只适用于第一级和第二级，但我需要更深入地显示所有子级。也许使用JQuery函数更好，但我不知道如何使用！加载时，菜单如下所示：

更新
生成子级别的代码：

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>';
}

foreach（$categories作为$category）{
$data['x'].=''.$category['name'].'；
}

生成根类别的代码：

<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>


$（文档）.ready（函数（）{
$（'ul#mnav>li>a'）。在（'click'，函数（e）{
控制台日志（“1级”）；
e、 预防默认值（）；
var cat=$（this.attr（'id'）；
var url='index.php？route=test/categoryx/child&category_id='+cat；
$（'#mnav#sub1'）。删除（）；
$（$（“”）.load（url+“#myContainer”）.insertAfter（'#mnav#'+cat）；
}); 
$（'ul#sub1 a'）。在（'click'，函数（e）{
控制台日志（“2级”）；
e、 预防默认值（）；
var cat=$（this.attr（'id'）；
var url='index.php？route=test/categoryx/child&category_id='+cat；
$（'#sub2'）。删除（）；
$（“”）.load（url+“#myContainer”）.insertAfter（'ul#sub1#'+cat）；
});

我尝试了不同的方法进入第二关，但没有成功，我尝试了许多不同的方法。

您可以尝试：

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

或者使用find（）函数：

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

您可以尝试：

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

或者使用find（）函数：

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

您没有任何带有

id=“sub1”

或

id=“mnav”

的元素。这就是为什么onclick函数不会触发的原因。请也输入编译过的php，因为我在HTMLY中看不到

mnav

。您可能想阅读jQuery教程：（以及那里的所有其他文章）不要尝试随机的事情。好吧，你没有真正描述问题是什么，标题是空洞的。“它不起作用”不是一个有用的问题描述（参见如何写一个更好的问题）。我只能假设你的问题是看一下我之前评论中的链接。我假设这就是问题所在。关于你的问题的任何内容都应该在你的帖子中。我不应该去你的页面找出问题所在，特别是因为你会在某个时候修复它，所以未来的访问者不会知道问题所在。你没有任何电子邮件使用

id=“sub1”

或

id=“mnav”

来删除。这就是为什么onclick函数不会触发的原因。请也输入一个编译过的php，因为我在HTMLY中看不到

mnav