Question

我正在尝试添加菜单选项中的添加。它首次显示正确的图像，但是当我添加子菜单时，它没有显示正确的图像。

我刚从这个链接中获得了帮助：

http://www.webstutorial.com/jquery-treeview-list/jquery

我已完成以下步骤。按＆＃34;添加＆＃34;按钮，它会在左侧面板中生成菜单列表。我检查了左侧面板。当我扩展＆＃34; +＆＃34;按下按钮，然后单击任何子菜单选项，然后按下＆＃34;添加＆＃34;按钮它生成嵌套子菜单，但它应该显示＆＃34; _＆＃34; button.But它是＆＃34; +＆＃34;

http://jsfiddle.net/PZR7N/

function addInmenu(id){

     var menuid="menu_"+id;
    // var data = $('#menuId li').html();
    if($('.tree li.parent').hasClass('active')){  
        var selSubMENUID = $("#selectedSubmenu").val();
        if( selSubMENUID ==""){
            $('#menuId li:first ').append('<ul style="display:block" ><li id=' + menuid + '><a>'+menuid+'</a></li> </ul>');}
        else{
        $("li#"+selSubMENUID).append('<ul style="display:block" ><li id=' + menuid + '><a>'+menuid+'</a></li> </ul>');
        }  
    }
    else{
        var selSubMENUID = $("#selectedSubmenu").val();
        if( selSubMENUID ==""){
            $('#menuId li:first ').append('<ul style="display:none" ><li id=' + menuid + ' class="submenu"><a>'+menuid+'</a></li> </ul>');}
        else{
        $("li#"+selSubMENUID).append('<ul style="display:none" ><li id=' + menuid + ' class="submenu"><a>'+menuid+'</a></li> </ul>');
        }          

    }
        $('.tree li').each(function () {
        if ($(this).children('ul').length > 0) {
            $(this).addClass('parent');
        }});
    $('.tree li.parent > a').unbind("click");
     $('.tree li.parent > a').on('click',function () {
       $(this).parent().toggleClass('active');
        $(this).parent().children('ul').slideToggle('fast');
    });

}

$(document).on('click',"li.submenu > a",function(e){
 //alert('jii'+this.id) ;
    $("#selectedSubmenu").val($(this).parent().attr('id'));
      //  $('li').removeClass('activeclass');

     //$(this).addClass('activeclass');
    $("#ultest").html('');
})

Answer 1

需要添加＆＃39;有效＆＃39;在li下添加了新的子菜单

检查http://jsfiddle.net/rajumjib/PZR7N/6/

    $(function () {

    $('.slider-arrow').click(function () {
        var anchor = this;
        var removeClass = "show";
        var addClass = "hide";
        var diff = "+=300";
        var arrows = "&laquo;";
        if ($(anchor).hasClass("hide")) {
            diff = "-=300";
            removeClass = "hide";
            addClass = "show";
            arrows = "&raquo;";
        }
        $(".slider-arrow, .panel").animate({
            left: diff
        }, 700, function () {
            // Animation complete.
            $(anchor).html(arrows).removeClass(removeClass).addClass(addClass);
        });
    });

    $('.tree li').each(function () {
        if ($(this).children('ul').length > 0) {
            $(this).addClass('parent');
        }
    });


    $('#add').click(function () {
        var selSubMENUID = $("#selectedSubmenu").val();
        if( selSubMENUID ==""){

    var listItems = $("#ultest").children();
    var id;
    if (typeof ($("#ultest li:last").attr('id')) == 'undefined') {
        //alert('undefint');
        id = "tc_1"
    } else {
        id = $("#ultest li:last").attr('id');
        var index = id.indexOf("_");
        var count = id.substring(index + 1, id.length)
        count = parseInt(count);
        id = id.substring(0, index) + "_" + parseInt(count + 1);
       // alert(id)
    }

    $('#ultest').append('<li id=' + id + '><a href="#" class="foo">' + id + '</a></li>');
    //$('#ultest').listview('refresh');
        addInmenu(id);
    }else {
        var newID=selSubMENUID.substring(5,selSubMENUID.length);
         var listItems = $("#ultest").children();
    var id;
    if (typeof ($("#ultest li:last").attr('id')) == 'undefined') {
        //alert('undefint');
        id = newID+"_tc_1"
    } else {
        id = $("#ultest li:last").attr('id');
        alert('id'+id);
        var index = id.lastIndexOf("_");
        var count = id.substring(index + 1)
        count = parseInt(count);
        id = id.substring(0, index) + "_" + parseInt(count + 1);
       // alert(id)
    }
    $('#ultest').append('<li id=' + id + '><a href="#" class="foo">' + id + '</a></li>');
    //$('#ultest').listview('refresh');
        addInmenu(id);

    }
});

});

function addInmenu(id){

     var menuid="menu_"+id;
    // var data = $('#menuId li').html();
    if($('.tree li.parent').hasClass('active')){  
        var selSubMENUID = $("#selectedSubmenu").val();
        if( selSubMENUID ==""){
            $('#menuId li:first ').append('<ul style="display:block" ><li id=' + menuid + '><a>'+menuid+'</a></li> </ul>');}
        else{
            $("li#"+selSubMENUID).addClass('active');
        $("li#"+selSubMENUID).append('<ul style="display:block" ><li id=' + menuid + '><a>'+menuid+'</a></li> </ul>');
        }  
    }
    else{
        var selSubMENUID = $("#selectedSubmenu").val();
        if( selSubMENUID ==""){
            $('#menuId li:first ').append('<ul style="display:none" ><li id=' + menuid + ' class="submenu"><a>'+menuid+'</a></li> </ul>');}
        else{
            $("li#"+selSubMENUID).addClass('active');
        $("li#"+selSubMENUID).append('<ul style="display:none" ><li id=' + menuid + ' class="submenu"><a>'+menuid+'</a></li> </ul>');
        }          

    }
        $('.tree li').each(function () {
        if ($(this).children('ul').length > 0) {
            $(this).addClass('parent');
        }});
    $('.tree li.parent > a').unbind("click");
     $('.tree li.parent > a').on('click',function () {
       $(this).parent().toggleClass('active');
        $(this).parent().children('ul').slideToggle('fast');
    });

}

$(document).on('click',"li.submenu > a",function(e){
 //alert('jii'+this.id) ;
    $("#selectedSubmenu").val($(this).parent().attr('id'));
      //  $('li').removeClass('activeclass');

     //$(this).addClass('activeclass');
    $("#ultest").html('');
})

添加以下代码

$("li#"+selSubMENUID).addClass('active');

代码中还有其他需要修复的错误

为什么不显示 - （减号）图像 - 而是显示+图像

1 个答案: