2016-12-08 88 views
0

我想崩潰樹視圖,但無法做到這一點,請幫助我 你可以查看演示從下面的鏈接我想樹視圖崩潰每個節點最初按退休它應該擴大特定節點。崩潰樹視圖在初始階段

演示

http://www.jqueryscript.net/demo/Animated-Tree-View-Plugin-For-jQuery-Bootstrap-3-MultiNestedLists/

// Select the main list and add the class "hasSubmenu" in each LI that contains an UL 
$('ul').each(function(){ 
    $this = $(this); 
    $this.find("li").has("ul").addClass("hasSubmenu"); 
    $this.find("li").has("ul").css('collapsed', 'true'); 
}); 
// Find the last li in each level 
$('li:last-child').each(function(){ 
    $this = $(this); 
    // Check if LI has children 
    if ($this.children('ul').length === 0){ 
    // Add border-left in every UL where the last LI has not children 
    $this.closest('ul').css("border-left", "1px solid gray"); 
    } else { 
    // Add border in child LI, except in the last one 
    $this.closest('ul').children("li").not(":last").css("border-left","1px solid gray"); 
    // Add the class "addBorderBefore" to create the pseudo-element :defore in the last li 
    $this.closest('ul').children("li").last().children("a").addClass("addBorderBefore"); 
    // Add margin in the first level of the list 
    $this.closest('ul').css("margin-top","20px"); 
    // Add margin in other levels of the list 
    $this.closest('ul').find("li").children("ul").css("margin-top","20px"); 
    }; 
}); 
// Add bold in li and levels above 
$('ul li').each(function(){ 
    $this = $(this); 
    $this.mouseenter(function(){ 
    $(this).children("a").css({"font-weight":"bold","color":"#336b9b"}); 
    }); 
    $this.mouseleave(function(){ 
    $(this).children("a").css({"font-weight":"normal","color":"#428bca"}); 
    }); 
}); 
// Add button to expand and condense - Using FontAwesome 
$('ul li.hasSubmenu').each(function(){ 
    $this = $(this); 
    $this.prepend("<a href='#'><i class='fa fa-minus-circle'></i><i style='display:none;' class='fa fa-plus-circle'></i></a>"); 
    $this.children("a").not(":last").removeClass().addClass("toogle"); 
}); 
// Actions to expand and consense 
$('ul li.hasSubmenu a.toogle').click(function(){ 
    $this = $(this); 
    $this.closest("li").children("ul").toggle("slow"); 
    $this.children("i").toggle(); 
    return false; 
}); 
+0

我想你需要隱藏()所有子菜單:$(「。hasSubmenu ul」)。hide();而不是$ this.find(「li」)。has(「ul」)。css('collapsed','true');. – Banzay

回答

2

您可以嘗試使用代碼。會幫助你。 謝謝

$(document).read(function(){ 
    $('li.hasSubmenu ul').each(function(){ 
     $(this).hide(); 
    }); 
});