Question

好的，所以我在这里为我们建立了一个CMS，我遇到了一个无法创建任何导航的问题......

我的html导航看起来像：

<ul class="menu collapsible shadow-bottom">
                    <li>
                        <a href="dashboard.html" class=current> <img src="<?php echo base_url(); ?>inc/images/icons/packs/fugue/16x16/dashboard.png"> Dashboard</a>
                    </li>

                    <li>
                        <a href="javascript:void(0);"> <img src="<?php echo base_url(); ?>inc/images/icons/packs/fugue/16x16/blue-document-copy.png"> Pages</a>
                        <ul class=sub>
                            <li>
                                <a href="list_block.html"> View All</a>
                            </li>
                            <li>
                                <a href="list_shortcut.html"> Create New</a>
                            </li>
                        </ul>
                    </li>
                </ul>

你会看到有2个列表。这与ul class = sub links ...

有关

我试过了：

$('.sub li a').click(function() { alert('something'); return false; });

我也尝试在每个链接中添加一个类，即：class =“pages”，使用此代码：

$('.pages').click(function() { alert('something'); return false; });

这似乎也没有用。我无法弄明白......

一旦我开始工作，我需要计算以下内容......

从DOM中的任何内容中删除class ='current'
将class ='current'添加到被点击的内容中...除非在其下有子页面的情况下..因为您单击子页面（查看全部，在上面的代码中添加新内容）它需要将class =“current”添加到父页面（“Pages”）...

这是我现在的整个JS档案......

$().ready(function() {
$('.loader').hide();

var validateloginform = $("#login-form").validate({
    submitHandler: function(e) {
        $(e).parent().parent().fadeOut('slow');
        $('.loader').fadeIn('slow');
        setTimeout(function() {
            $.ajax({
                url: $('#login-form').attr('action'),
                type: 'POST',
                data: $('#login-form').serialize(),
                success: function(response) {
                    var obj = $.parseJSON(response);
                    if (obj.type == 'error') {
                        $('.loader').fadeOut();
                        $(e).parent().parent().fadeIn();
                        $('#login-form').alertBox(obj.msg, {type: 'error'});
                    }
                    if (obj.type == 'success') {
                        window.location.replace(obj.msg);
                    }
                }
            })}, 3000
        );
    },
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            var message = errors == 1 ?
            'You missed 1 field.  It has been highlighted.' :
            'You missed '+ errors + ' fields.  They have been highlighted.';
            $('#login-form').removeAlertBoxes();
            $('#login-form').alertBox(message, {type: 'error'});
        }
    }
})

$('.logout').click(function() {
    $.ajax({
        url: 'auth/logout',
        type: 'POST',
        success: function(response) {
            window.location.reload(true);
        }
    })
    return false;
});

$('.pages').click(function() {
    alert('nope');
    return false;
});
});

感谢任何帮助。

我已经弄明白为什么它不起作用，现在只是修复它......

jQuery.fn.initMenu=function(){
return this.each(function(){
    var a=$(this).get(0);
    $("li:has(ul)",this).each(function(){
        $(">a",this).append("<span class='arrow'></span>")
    });
    $(".sub",this).hide();
    $("li.expand > .sub",this).show();
    $("li.expand > .sub",this).prev().addClass("active");
    $("li a",this).click(function(d){
        d.stopImmediatePropagation();
        var c=$(this).next();
        var b=this.parentNode.parentNode;
        if($(this).hasClass("active-icon")){
            $(this).addClass("non-active-icon");
            $(this).removeClass("active-icon")
        }else{
            $(this).addClass("active-icon");
            $(this).removeClass("non-active-icon")
        }
        if($(b).hasClass("noaccordion")){
            if(c[0]===undefined){
                window.location.href=this.href
            }
            $(c).slideToggle("normal",function(){
                if($(this).is(":visible")){
                    $(this).prev().addClass("active")
                }else{
                    $(this).prev().removeClass("active");
                    $(this).prev().removeClass("active-icon")
                }
            });
            return false
        }else{
            if(c.hasClass("sub")&&c.is(":visible")){
                if($(b).hasClass("collapsible")){
                    $(".sub:visible",b).first().slideUp("normal",function(){
                        $(this).prev().removeClass("active");
                        $(this).prev().removeClass("active-icon")
                    });
                    return false
                }
                return false
            }
            if(c.hasClass("sub")&&!c.is(":visible")){
                $(".sub:visible",b).first().slideUp("normal",function(){
                    $(this).prev().removeClass("active");
                    $(this).prev().removeClass("active-icon")
                });
                c.slideDown("normal",function(){
                    $(this).prev().addClass("active")
                });
                return false
            }
        }
    })
})
};

Answer 1

您的班级名称周围缺少引号。应该是这个......

<ul class='sub'>

然后这将起作用：

$('.sub li a').click(function() { alert('something'); return false; });

jsFiddle Example

Answer 2

这可能是因为您在加载正文之前的处理。尝试类似（*未经测试的）

$( function ( ) {
    //after body load do ...

    // validation

    // logout

    // and navigation click
    // if you were to manipulate the html/dom you would also need to use jQuerys live 

    $('.pages').live('click', function ( e ) {
        // do something when clicked
    });
});

Answer 3

代码：

jQuery.fn.initMenu=function(){
return this.each(function(){
var a=$(this).get(0);
$("li:has(ul)",this).each(function(){
    $(">a",this).append("<span class='arrow'></span>")
});
$(".sub",this).hide();
$("li.expand > .sub",this).show();
$("li.expand > .sub",this).prev().addClass("active");
$("li a",this).click(function(d){
    d.stopImmediatePropagation();
    var c=$(this).next();
    var b=this.parentNode.parentNode;
    if($(this).hasClass("active-icon")){
        $(this).addClass("non-active-icon");
        $(this).removeClass("active-icon")
    }else{
        $(this).addClass("active-icon");
        $(this).removeClass("non-active-icon")
    }
    if($(b).hasClass("noaccordion")){
        if(c[0]===undefined){
            window.location.href=this.href
        }
        $(c).slideToggle("normal",function(){
            if($(this).is(":visible")){
                $(this).prev().addClass("active")
            }else{
                $(this).prev().removeClass("active");
                $(this).prev().removeClass("active-icon")
            }
        });
        return false
    }else{
        if(c.hasClass("sub")&&c.is(":visible")){
            if($(b).hasClass("collapsible")){
                $(".sub:visible",b).first().slideUp("normal",function(){
                    $(this).prev().removeClass("active");
                    $(this).prev().removeClass("active-icon")
                });
                return false
            }
            return false
        }
        if(c.hasClass("sub")&&!c.is(":visible")){
            $(".sub:visible",b).first().slideUp("normal",function(){
                $(this).prev().removeClass("active");
                $(this).prev().removeClass("active-icon")
            });
            c.slideDown("normal",function(){
                $(this).prev().addClass("active")
            });
            return false
        }
    }
})
})
};

有问题..所以删除这一行：

d.stopImmediatePropagation();

完成后，添加基于链接的自动类更改...在第一个else语句后添加以下内容，它应该完美。

if ($(b).hasClass('menu')) {
$('ul.menu li a').removeClass("current");
}

if ($(b).hasClass('sub')) {
$('ul.sub li a').removeClass("current");
}
$(this).addClass('current');

可能有一种更优雅的方式来实现自动类更改...但这可行...当您单击主菜单的一部分时，它会被触发为当前页面...然后如果该项目在主菜单中有一个子菜单，当你点击它时它会被触发作为子菜单的当前页面，同时不会降低主菜单的设置。

现在唯一可以解决的问题是，如果你想要两个函数，例如：

$('.menu li a').click(function() {});

和

$('.sub li a').click(function() {});

有了这个，由于某种原因，菜单一个正常工作，但当你点击sub时，两个函数都被触发......

jquery .click（）似乎没有用

3 个答案: