Question

我正在学习Bootstrap 4，js等。

我希望能够在页面首次加载时自动扩展节点。我尝试更改数据折叠，但它又回到了折叠模式。我也尝试过js，但是它会扩展并自动再次崩溃。

我已经检查过this post，但由于没有树组件，因此不适用于引导程序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： Code

Answer 1

您只需将$('#expandthis').collapse('toggle');行替换为$('#ulExpCol_10').collapse('toggle');，它便可以正常工作。

将$('#expandthis').collapse('toggle');应用于<li id="expandthis">时没有任何反应，因为list元素没有附加数据切换。您要切换实际的子菜单，如下面的工作小提琴所示。

对于父级颜色应该为黑色的部分：文本实际上位于a元素内，而不是i元素内，因此您必须在此处应用类。如果您不希望在菜单上悬停时出现下划线效果，则还可以添加text-decoration: none !important;（由于正在使用Bootstrap，因此需要!important）。

.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>

干杯！

Bootstrap 4-页面加载时自动扩展节点

1 个答案: