why isn't it showing -(minus) image - instead it shows + image

Question

I am trying to append add in menu option. It shows the correct image first time, but when I add submenu, it is not showing the correct image.

I just took help from this link:

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

I've done the following steps. Press "add" button, it generates the list of menu in left panel. I checked the left panel. When I expanded "+" by pressing button, and clicked any of the submenu option then, pressed "add" button it generated nested submenu, but it should should show "_" button.But it is show is "+"

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

Need to add 'active' to li under which new submenu has been added

check at 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 = "«";
        if ($(anchor).hasClass("hide")) {
            diff = "-=300";
            removeClass = "hide";
            addClass = "show";
            arrows = "»";
        }
        $(".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('');
})

following code added

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

the code has other bugs which are needed to be fixed