javascript - How to fix the CSS before/after content and improve the expand/collapse function?

Question

The sidebar menu below works as expected but there are some elements that I would like to fix and improve.

• #1 If you expand the 'System Admin' section the line that is displayed on the left side a in the correct place. However, if you click on the 'Access Control' the line eon the left side is going below the horizontal line that's pointing to that section. I tried fixing that with css 'last-child' method but still is not working correct. If I change percentage from 50% to 85% then the other section will have an issue. #2 I'm looking for a better way to expand/collapse the sections. The function show mimic the existing one, but instead of using the object with key items I would like to use classes instead if possible.

$( document ).ready(function() {
    SIDEBAR_OLD.BASE.ExpandCollapse('Auto');
});

const SIDEBAR_OLD = {};
SIDEBAR_OLD.BASE ={};

SIDEBAR_OLD.BASE.ToggleContent = function(section_id) {
    let $sContents = $("#section_" + section_id);
        
    if ( $sContents.css("display") != "none" ) {
        $sContents.css("display","none");
    } else { // Default to seeing the folder's contents:
        $sContents.css("display","");
    }
};

$("#main-page-wrapper").on("click", ".toggle-menu", function(e){
    e.preventDefault();
    let section_id = $(this).attr("data-id");
    SIDEBAR_OLD.BASE.ToggleContent(section_id);
});

SIDEBAR_OLD.BASE.ExpandCollapse = function(action) {
    let $sContents = null,
        sExpand = null,
        sRoot = false,
        items = {1:"m",2:"sysadmin",5:"access"};

    for (key in items) {
        $sContents = $("#section_" + items[key]);
        
        switch (action) {
            case "Expand":
                sExpand = "Yes";
                break;
            case "Collapse":
                sExpand = "No";
                break;
            default:
                if ( !(sExpand = $sContents.attr("data-expand")) ) sExpand = "Yes";
        }

        // Never close root elements automatically. Only ToggleContent(pNumber), below, can do that. 
        if ( sRoot = $sContents.attr("data-root") ) {   // Note! Assignment! "=", not "=="!
            if (sRoot == "Yes") sExpand = "Yes";
        }

        if  ( sExpand == "No" ) {
            $sContents.css("display","none");
        } else { // Default to seeing the folder's contents:
            $sContents.css("display","");
        }
    }
    
    return true;
};

$("#main-page-wrapper").on("click", ".collapse-menu", function(e){
    e.preventDefault();
    let action = $(this).attr("data-action");
    SIDEBAR_OLD.BASE.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;
}

.sidebar a {
  color: #fff;
}

.menuitem {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.menuitem:hover, .menuitem:focus {
  color: #ff0;
}

#tree {
  font-weight: bold;
  padding: 1px;
}

#expandcollapse {
  border: 1px solid white;
  text-align: center;
}

.sb-row {
  border: 0px;
  height: 22px;
  margin: 0px;
  overflow: hidden;
  padding: 0px 0px 0px 3px;
  position: relative;
  white-space: nowrap;
}

.fa-folder-open:before {
  color: #DBDB2A !important;
}

.nav>li {
  position: relative;
  display: block;
}

.nav>li>a {
  position: relative;
  display: block;
  padding: 7px 22px 6px;
}

.nav>li>a:focus {
  text-decoration: none;
  background: transparent;
  background-color: transparent;
}

.nav > li > a:hover {
  color: red;
  background-color: transparent;
  text-decoration: none;
}

.nav.side-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;
}

li.first-level::before {
  background: #fff;
  bottom: auto;
  content: "";
  height: 1px;
  left: 10px;
  margin-top: 14px;
  position: absolute;
  right: auto;
  width: 8px;
}

li.first-level::after {
  border-left: 1px solid #fff;
  bottom: 0;
  content: "";
  left: 10px;
  position: absolute;
  top: 0;
}

ul.nav.side-menu li.first-level:last-child::after {
  bottom: 50%;
}

<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/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<body>
  <div class="container body" id="main-page-wrapper">
    <div class="sidebar">
      <div id="tree" role="navigation" data-expandall="Auto">
        <div id="expandcollapse">
          <a class="menuitem collapse-menu pr-2" href="#" data-action="Expand">Expand</a> | <a class="menuitem collapse-menu pl-2" href="#" data-action="Collapse">Collapse</a>
        </div>
        <div class="sb-row">
          <a class="toggle-menu" title="Open/Close Folder - System Management" data-id="m">
            <i class="fa fa-folder-open fa-lg"></i> System Management
          </a>
        </div>
        <div id="section_m" class="menu-section" data-root="Yes" data-expand="Yes">
          <ul class="nav side-menu">
            <li class="first-level">
              <a class="toggle-menu" href="#" title="System Admin" data-id="sysadmin"><i class="fa fa-folder-open"></i> System Admin</a>
              <ul class="nav child_menu first" id="section_sysadmin" data-expand="No">
                <li><a class="link-item" data-action="param" title="System Parameters">System Parameters</a></li>
                <li><a class="link-item" data-action="schema" title="Select Schema">Select Schema</a></li>
                <li><a class="link-item" data-action="item" title="Menu Item">Menu Items</a></li>
              </ul>
            </li>
            <li class="first-level">
              <a class="toggle-menu" href="#" title="Access Control" data-id="access"><i class="fa fa-folder-open"></i> Access Control</a>
              <ul class="nav child_menu first" id="section_access" data-expand="No">
                <li><a class="link-item" data-action="user" title="Manage User">Manage User</a></li>
                <li><a class="link-item" data-action="role" title="Manage Role">Manage Role</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

question from:https://stackoverflow.com/questions/65911441/how-to-fix-the-css-before-after-content-and-improve-the-expand-collapse-function

Answer 1

Waitting for answers