引导程序 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>

干杯！