Bootstrap 4 - автоматическое расширение узла при загрузке страницы

Question

Я изучаю Bootstrap 4, JS и т. Д.

Я хочу иметь возможность автоматически расширять узел при первой загрузке страницы. Я попытался изменить коллапс данных, но он возвращается в свернутый режим. Я также пробовал js, но он расширяется и снова автоматически сворачивается.

Я проверил этот пост , но он не относится к начальной загрузке 4, поскольку отсутствует компонент дерева.

Это код, который не работает. Спасибо.

HTML

<ul class="list-unstyled">
   <li id="expandthis">
        <a href="#ulExpCol_10" data-toggle="collapse"              
                       onclick="$('#thisCollapsedChevron_10').toggleClass('fa-rotate-90')">
             <i class="zz_TreeParent" id="thisCollapsedChevron_10"></i>
               Level 1 Parent Link 1--
               </a>
                <!-- Children -->
                <ul id="ulExpCol_10" class="ml-3 list-unstyled collapse"
                    <li>
                       <a href="#item-001-001" class="zz_TreeLeaf">
                          Submenu Item-11
                       </a>
                    </li>
                 <li>
                     <a href="#item-001-002" class="zz_TreeLeaf">
                        Submenu Item-12
                     </a>
                 </li>

               </ul>
            </li>            
     <li>
         <a href="#item-001-002" class="zz_TreeParent">
           Level 1 Item-2-No Children
        </a>
     </li>           

JS

  $(document).ready(function () {
            $('#expandthis').collapse('toggle');     
  });

JSFiddle: код

Answer 1

Вы можете просто заменить строку $('#expandthis').collapse('toggle'); на $('#ulExpCol_10').collapse('toggle');, и она будет работать соответствующим образом.

При применении $('#expandthis').collapse('toggle'); к <li id="expandthis"> ничего не происходит, так как к элементу списка не присоединен переключатель данных.Вы хотите переключить фактическое подменю, как в рабочей скрипте ниже.

Для части, где цвет родителя должен быть черным: текст на самом деле внутри элемента a, а не внутриi элемент, поэтому вы должны применить класс там.Если вам не нужен эффект подчеркивания при наведении на меню, вы также можете добавить text-decoration: none !important; (!important необходим, потому что вы используете Bootstrap).

.zz_TreeParent {
  color: black;
  text-decoration: none !important;
}

.zz_TreeParent: hover {
  color: black;
  text-decoration: none !important;
}

$(document).ready(function() {
  $('#ulExpCol_10').collapse('toggle');
});

.zz_TreeParent {
  color: black;
  text-decoration: none !important;
}

.zz_TreeParent: hover {
  color: black;
  text-decoration: none !important;
}

.zz_TreeLeaf {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<ul class="list-unstyled">
   <li id="expandthis">
        <a href="#ulExpCol_10" data-toggle="collapse"              
				 	   onclick="$('#thisCollapsedChevron_10').toggleClass('fa-rotate-90')" class="zz_TreeParent">
             <i class="zz_TreeParent" id="thisCollapsedChevron_10"></i>
               Level 1 Parent Link 1--
               </a>
                <!-- Children -->
                <ul id="ulExpCol_10" class="ml-3 list-unstyled collapse"
                    <li>
                       <a href="#item-001-001" class="zz_TreeLeaf">
                          Submenu Item-11
                       </a>
                    </li>
                 <li>
                     <a href="#item-001-002" class="zz_TreeLeaf">
                        Submenu Item-12
                     </a>
                 </li>
								 
               </ul>
            </li>
		 
		 
     <li>
        <a href="#item-001-002" class="zz_TreeParent">
           Level 1 Item-2-No Children
        </a>
     </li>
		 
		 </ul>

Ура!