Bootstrap Рухнул на нагрузке

Question

Я использую этот скрипт

$(function() { 
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch'); 
$('.tree li.parent_li > span').on('click', function (e) { 
    var children = $(this).parent('li.parent_li').find(' > ul > li'); 
    if (children.is(":visible")) { 
     children.hide('fast'); 
     $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign'); 
    } else { 
     children.show('fast'); 
     $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign'); 
    } 
    e.stopPropagation(); 
}); 

http://jsfiddle.net/jhfrench/GpdgF/

рекурсивного складного меню. Он работает отлично. Но мне нужно, чтобы меню рушилось изначально, когда загружается страница и расширяется только при нажатии.

Мое знание JS слабы. Но я попытался использовать toggle(); и hide(); , Это приводит к разрушился и оленья кожа расширяться по щелчку

Ниже рекурсивному PHP код

<?php 
function listroles($roles) 
{ 
    ?> 
    <ul> 
    <?php 
    foreach($roles as $role) 
    { 
     ?> 
     <li> 
      <span><i class="icon-plus "></i> Parent</span> <a href="<?php echo $role['category']->slug; ?>"><?php echo $role['category']->name; ?></a> 
      <?php 
      if (! empty($role['children'])) 
      { 
       listroles($role['children']); 
      } 
      ?> 
     </li> 
     <?php 
    } 
    ?> 
    </ul> 
    <?php 
} 

listroles($this->categories_menu); 
?> 

Answer 1

Вы можете добавить правило CSS, чтобы скрыть ребенок Lī элементы на старте

.tree li ul > li { 
    display: none; 
} 

Демы: Fiddle

или скрыть ребенка Lī элемент на странице загрузки

$(function() { 
    $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch'); 

    //hide the child li elements 
    $('.tree li ul > li').hide(); 
    $('.tree li.parent_li > span').on('click', function (e) { 
     var children = $(this).parent('li.parent_li').find(' > ul > li'); 
     if (children.is(":visible")) { 
      children.hide('fast'); 
      $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign'); 
     } else { 
      children.show('fast'); 
      $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign'); 
     } 
     e.stopPropagation(); 
    }); 
}); 

Демо: Fiddle

Answer 2

Самый простой способ сделать то, что вы хотите, чтобы запустить обработчик мыши() один раз.

$(function() { 
    $('.tree li.parent_li > span').on('click', function (e) { 
     $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch'); 
     //blah blah blah 
     e.stopPropagation(); 
    }).click(); 
}); 

редактировать: забыл код