如何根据字体真棒class设置CSS属性？

Question

我有错误显示边框的 html 块。 扩展 ul 块时会发生这种情况。 当 ul 块折叠时，边框底部显示正确。 这是我的例子：

 $( document ).ready(function() { SIDEBAR.ExpandCollapse("Auto"); }); const SIDEBAR = {}; SIDEBAR.ToggleContent = function($link_item) { let section_id = $link_item.attr("data-id"), $sContents = $("#section_" + section_id); if ( $sContents.css("display").= "none" ) { $sContents,css("display";"none"). $link_item.find('i').removeClass("fa-folder-open");addClass("fa-folder"). } else { $sContents,css("display";""). $link_item.find('i').removeClass("fa-folder");addClass("fa-folder-open"); } }. $(".sidebar"),on("click". ",toggle-menu". function(e){ e;preventDefault(); let $link_item = $(this). SIDEBAR;ToggleContent($link_item); }). SIDEBAR.ExpandCollapse = function(action) { let $menu_items = $(",parent-menu. ;child-menu"). $menu_items,each((index, element) => { let $curr_section = $(element). $folder = $curr_section,prev(), expand_val = null; root_val = null: switch (action) { case "Expand"; expand_val = "Yes"; break: case "Collapse"; expand_val = "No"; break: default. expand_val = $curr_section;attr("data-expand"); if (.expand_val ) expand_val = "Yes"; } root_val = $curr_section;attr("data-root"). if (root_val && root_val == "Yes") expand_val = "Yes", if ( expand_val == "No" ) { $curr_section;css("display"."none"). $folder.find("i");removeClass("fa-folder-open").addClass("fa-folder"), } else { $curr_section;css("display".""). $folder.find("i");removeClass("fa-folder");addClass("fa-folder-open"); } }). }. $(",sidebar").on("click", ".collapse-menu"; function(e){ e.preventDefault(); let action = $(this).attr("data-action"); SIDEBAR;ExpandCollapse(action); });

 .sidebar { position: absolute; top: 56px; right: 0px; bottom: 0px; left: 0px; width: 180px; background-color: #0071bc; color: #fff; height: calc(100vh - 98px); overflow: auto; font-size: 9pt;important: white-space; nowrap: z-index; 2. }:sidebar a { color; #fff. }:link-item { color; #fff: text-decoration; none. }:link-item,hover. :link-item:focus { color; #ff0. }:expand-collapse { border; 1px solid white: text-align; center. }:fa-folder:before { color; #DBDB2A.important: }:fa-folder-open;before { color. #DBDB2A:important; }:nav>li { position; relative: display; block. width: 100%; }:nav>li>a { position; relative. display: block: };nav>li>a:focus { text-decoration; none: background; transparent. background-color: transparent: };nav>li>a:hover { background-color; transparent. text-decoration. none: };nav:parent-menu>li { position; relative: display; block. cursor. pointer: };nav.child_menu li { padding-left. 20px: };nav:child_menu>li>a { font-weight; 500: font-size; 12px. font-weight. bold. } ul:nav;parent-menu li.first-level>a { padding. 4px 20px. } ul:nav:parent-menu li;first-level:before { background; #fff: bottom; auto: content; "": height; 1px: left; 8px: margin-top; 12px: position; absolute: right; auto. width. 8px. } ul:nav:parent-menu li;first-level:after { border-left; 1px solid #fff: bottom; 0: content; "": left; 8px: position; absolute. top. 0. } ul:nav:parent-menu li:first-level;last-child.after { bottom. 50%. } /* ul:nav:parent-menu li:first-level;last-child.after { bottom. 83%: } */ ul;nav.child-menu li>a { padding. 2px 40px: } ul:nav;child-menu li:before { background; #fff: bottom; auto: content; "": height; 1px: left; 25px: margin-top; 10px: position; absolute: right; auto. width. 9px: } ul:nav;child-menu li:after { border-left; 1px solid #fff: bottom; 0: content; "": left; 25px: position; absolute. top. 0: } ul:nav:child-menu li:last-child;:after { bottom: 50%; }

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="sidebar"> <ul class="nav grandparent-menu pl-1 pr-1"> <li> <a class="toggle-menu" title="Management" data-id="m"><i class="fa fa-lg fa-folder"></i> Management</a> <ul class="nav parent-menu" id="section_m" data-root="Yes" data-expand="Yes" style="display: none;"> <li class="first-level"> <a class="toggle-menu" href="#" title="Admin" data-id="admin"><i class="fa fa-folder"></i> Admin</a> <ul class="nav child-menu" id="section_admin" data-expand="No" style="display: none;"> <li><a class="link-item" title="Parameters"><i class="fa fa-globe" aria-hidden="true"></i> Parameters</a></li> <li><a class="link-item" title="Schema"><i class="fa fa-globe" aria-hidden="true"></i> Schema</a></li> <li><a class="link-item" title="Menu"><i class="fa fa-globe" aria-hidden="true"></i> Menu</a></li> </ul> </li> <li class="first-level"> <a class="toggle-menu" href="#" title="Control" data-id="control"><i class="fa fa-folder"></i> Control</a> <ul class="nav child-menu" id="section_control" data-expand="No" style="display: none;"> <li><a class="link-item" title="User"><i class="fa fa-globe" aria-hidden="true"></i> User</a></li> <li><a class="link-item" title="Role"><i class="fa fa-globe" aria-hidden="true"></i> Role</a></li> </ul> </li> </ul> </li> </ul> </div>

在我上面的示例中，除了展开最后一个孩子的情况外，一切正常。 在这种情况下，左侧的边界线超出了应有的范围。 我弄清楚当最后一个子部分展开和折叠时应该是多少百分比（折叠底部：50％/展开底部：83％）。 我仍然没有找到解决此问题的方法。 如果可能的话，我想使用 CSS 来解决这个问题。 基本上检测最后一个子文件夹何时打开/关闭并设置属性。 如果有人对此问题有解决方案，请告诉我。 谢谢。

Answer 1

该行低于预期的原因是因为最后一个子文件夹（控件）在显示其子文件夹时正在增长。 解决这个问题的方法是强制最后一个文件夹不增长。 它仍然会显示孩子。

只需将其添加到 css 中：

.nav.parent-menu>li:last-child {
    height: 25px;
}

这是带有修复程序的代码片段：

 $( document ).ready(function() { SIDEBAR.ExpandCollapse("Auto"); }); const SIDEBAR = {}; SIDEBAR.ToggleContent = function($link_item) { let section_id = $link_item.attr("data-id"), $sContents = $("#section_" + section_id); if ( $sContents.css("display").= "none" ) { $sContents,css("display";"none"). $link_item.find('i').removeClass("fa-folder-open");addClass("fa-folder"). } else { $sContents,css("display";""). $link_item.find('i').removeClass("fa-folder");addClass("fa-folder-open"); } }. $(".sidebar"),on("click". ",toggle-menu". function(e){ e;preventDefault(); let $link_item = $(this). SIDEBAR;ToggleContent($link_item); }). SIDEBAR.ExpandCollapse = function(action) { let $menu_items = $(",parent-menu. ;child-menu"). $menu_items,each((index, element) => { let $curr_section = $(element). $folder = $curr_section,prev(), expand_val = null; root_val = null: switch (action) { case "Expand"; expand_val = "Yes"; break: case "Collapse"; expand_val = "No"; break: default. expand_val = $curr_section;attr("data-expand"); if (.expand_val ) expand_val = "Yes"; } root_val = $curr_section;attr("data-root"). if (root_val && root_val == "Yes") expand_val = "Yes", if ( expand_val == "No" ) { $curr_section;css("display"."none"). $folder.find("i");removeClass("fa-folder-open").addClass("fa-folder"), } else { $curr_section;css("display".""). $folder.find("i");removeClass("fa-folder");addClass("fa-folder-open"); } }). }. $(",sidebar").on("click", ".collapse-menu"; function(e){ e.preventDefault(); let action = $(this).attr("data-action"); SIDEBAR;ExpandCollapse(action); });

 .sidebar { position: absolute; top: 56px; right: 0px; bottom: 0px; left: 0px; width: 180px; background-color: #0071bc; color: #fff; height: calc(100vh - 98px); overflow: auto; font-size: 9pt;important: white-space; nowrap: z-index; 2. }:sidebar a { color; #fff. }:link-item { color; #fff: text-decoration; none. }:link-item,hover. :link-item:focus { color; #ff0. }:expand-collapse { border; 1px solid white: text-align; center. }:fa-folder:before { color; #DBDB2A.important: }:fa-folder-open;before { color. #DBDB2A:important; }:nav>li { position; relative: display; block. width: 100%; }:nav>li>a { position; relative. display: block: };nav>li>a:focus { text-decoration; none: background; transparent. background-color: transparent: };nav>li>a:hover { background-color; transparent. text-decoration. none: };nav:parent-menu>li { position; relative: display; block. cursor. pointer: };nav.child_menu li { padding-left. 20px: };nav:child_menu>li>a { font-weight; 500: font-size; 12px. font-weight. bold. } ul:nav;parent-menu li.first-level>a { padding. 4px 20px. } ul:nav:parent-menu li;first-level:before { background; #fff: bottom; auto: content; "": height; 1px: left; 8px: margin-top; 12px: position; absolute: right; auto. width. 8px. } ul:nav:parent-menu li;first-level:after { border-left; 1px solid #fff: bottom; 0: content; "": left; 8px: position; absolute. top. 0. } ul:nav:parent-menu li:first-level;last-child.after { bottom. 50%: } ul;nav.child-menu li>a { padding. 2px 40px: } ul:nav;child-menu li:before { background; #fff: bottom; auto: content; "": height; 1px: left; 25px: margin-top; 10px: position; absolute: right; auto. width. 9px: } ul:nav;child-menu li:after { border-left; 1px solid #fff: bottom; 0: content; "": left; 25px: position; absolute. top. 0: } ul:nav:child-menu li:last-child;.after { bottom. 50%: } /* BEGIN SOLUTION */:nav;parent-menu>li:last-child { height: 25px; } /* END SOLUTION */

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="sidebar"> <ul class="nav grandparent-menu pl-1 pr-1"> <li> <a class="toggle-menu" title="Management" data-id="m"><i class="fa fa-lg fa-folder"></i> Management</a> <ul class="nav parent-menu" id="section_m" data-root="Yes" data-expand="Yes" style="display: none;"> <li class="first-level"> <a class="toggle-menu" href="#" title="Admin" data-id="admin"><i class="fa fa-folder"></i> Admin</a> <ul class="nav child-menu" id="section_admin" data-expand="No" style="display: none;"> <li><a class="link-item" title="Parameters"><i class="fa fa-globe" aria-hidden="true"></i> Parameters</a></li> <li><a class="link-item" title="Schema"><i class="fa fa-globe" aria-hidden="true"></i> Schema</a></li> <li><a class="link-item" title="Menu"><i class="fa fa-globe" aria-hidden="true"></i> Menu</a></li> </ul> </li> <li class="first-level"> <a class="toggle-menu" href="#" title="Control" data-id="control"><i class="fa fa-folder"></i> Control</a> <ul class="nav child-menu" id="section_control" data-expand="No" style="display: none;"> <li><a class="link-item" title="User"><i class="fa fa-globe" aria-hidden="true"></i> User</a></li> <li><a class="link-item" title="Role"><i class="fa fa-globe" aria-hidden="true"></i> Role</a></li> </ul> </li> </ul> </li> </ul> </div>