javascript 带有Accordian效果的侧边栏导航循环

Posted 2021-05-04

// WARNING CONTAINS VARIABLES
.sidebar {
  flex: 0 0 auto;
  padding-left: 50px;
  width: 275px;

  ul {
    list-style: outside none none;
    margin: 0px;
    padding: 0px;
  }
  > ul {
    a { 
      color: $black; 
      display:block;
      text-transform: uppercase; 
      text-decoration: none; 
      width:100%; 
      @include transition; 
      &:hover {
        color: $gold;
      }
    }
    > li {
      border-bottom: 1px solid #E8E8E8;
      font-weight: bold;
      padding: 23px 0;
    }
    > li > div { 
      display: none;
      margin-bottom:15px;
      margin-top: 20px;
      padding-left: 35px;
      padding-top: 10px;


      ul li { font-weight: normal; }
      a { padding: 5px 0; }
      > ul > li:last-of-type {
        a { padding-bottom: 0; }
      }
    }
    > li:last-of-type { border-bottom: 0; }
    > li.current-parent-sub > div { display:block; }
    a.current-sub { color: $gold; }
    a.has-submenu.show-menu + div { display:block; }
  }
}

//GET STRUCTURE LISTING
//Query for Category listing
$sql_query = 'SELECT * FROM bCMS_structures WHERE parent_id = "0" AND status = "Approved" AND display = "Show" ORDER BY order_id ASC';
$rs_app = $GLOBALS['ddb']->Execute($sql_query);

while (!$rs_app->EOF) {
  if (LAYOUT_TYPE == 'Admin') {
    $rs_app->fields['path'] = 'admin.php?tpl=none&sys=mods&sec=website&template=Primary&act=edit_template&structure_id='.$rs_app->fields['structure_id'];
  } else {
    $rs_app->fields['link'] = '[[PATH]]' . $rs_app->fields['directory'];
  }
  if (trim($rs_app->fields['redirect']) != "") $rs_app->fields['path'] = $rs_app->fields['redirect'];

  //Query for Subcategory listing
  $sql_sub_query = 'SELECT * FROM bCMS_structures WHERE parent_id = "' . $rs_app->fields['structure_id'] . '" AND status = "Approved" AND display = "Show" ORDER BY order_id ASC';
  $rs_sub_app = $GLOBALS['ddb']->Execute($sql_sub_query);
    while (!$rs_sub_app->EOF) {
      if (LAYOUT_TYPE == 'Admin') {
        $rs_sub_app->fields['path'] = 'admin.php?tpl=none&sys=mods&sec=website&template=Primary&act=edit_template&structure_id='.$rs_sub_app->fields['structure_id'];
      } else {
        $rs_sub_app->fields['path'] = '[[PATH]]' . $rs_app->fields['directory'] . '/' . $rs_sub_app->fields['directory'] . '/';
      }
      if (trim($rs_sub_app->fields['redirect']) != "") $rs_sub_app->fields['path'] = $rs_sub_app->fields['redirect'];
      $list_sub_categories[$rs_app->fields['structure_id']][] = $rs_sub_app->fields;
      
      //Query for Subsubcategory listing
      $sql_subsub_query = 'SELECT * FROM bCMS_structures WHERE parent_id = "' . $rs_sub_app->fields['structure_id'] . '" AND status = "Approved" AND display = "Show" ORDER BY order_id ASC';
      $rs_subsub_app = $GLOBALS['ddb']->Execute($sql_subsub_query);
      while (!$rs_subsub_app->EOF) {  
        if (LAYOUT_TYPE == 'Admin') {
          $rs_subsub_app->fields['path'] = 'admin.php?tpl=none&sys=mods&sec=website&template=Primary&act=edit_template&structure_id='.$rs_subsub_app->fields['structure_id'];
        } else {
          $rs_subsub_app->fields['path'] = '[[PATH]]' . $rs_app->fields['directory'] . '/'  . $rs_sub_app->fields['directory'] . '/' . $rs_subsub_app->fields['directory'] . '/';
        } 
        if (trim($rs_subsub_app->fields['redirect']) != "") $rs_subsub_app->fields['path'] = $rs_subsub_app->fields['redirect'];
        $list_subsub_categories[$rs_sub_app->fields['structure_id']][] = $rs_subsub_app->fields;
        $rs_subsub_app->MoveNext();
      }
      $rs_sub_app->MoveNext();
    }
  $rs_app->MoveNext();
}
$output->AssignVariable('list_sub_categories',$list_sub_categories);
$output->AssignVariable('list_sub_sub_categories',$list_subsub_categories);

<ul>
    <!--|section name=category loop=$list_categories|-->
      <!--|assign var=category_id value=$list_categories[category].structure_id|-->
      <!--|if $list_categories[category].name == $category|-->
      
      <!--|section name=sub_category loop=$list_sub_categories[$category_id]|-->
      <!--|assign var=sub_category_id value=$list_sub_categories[$category_id][sub_category].structure_id|-->
        
        <li class='

        <!--|section name=sub_sub_category loop=$list_sub_sub_categories[$sub_category_id]|--> 
          <!--|if $list_sub_sub_categories[$sub_category_id][sub_sub_category].name == $structure|--> current-parent-sub <!--|/if|-->
        <!--|/section|-->

        '>
          <a <!--|if $list_sub_sub_categories[$sub_category_id] != ''|--> class='has-submenu' <!--|/if|--> title='<!--|$list_sub_categories[$category_id][sub_category].name|-->' <!--|if $list_sub_categories[$category_id][sub_category].target == '_blank'|--> target='_blank' <!--|/if|--> href='<!--|$list_sub_categories[$category_id][sub_category].path|-->'>
            <!--|$list_sub_categories[$category_id][sub_category].name|-->
          </a>
          <!--|if $list_sub_sub_categories[$sub_category_id] != ''|-->
          <div>
            <ul>
               <!--|section name=sub_sub_category loop=$list_sub_sub_categories[$sub_category_id]|-->
                <li>
                  <a class='
     <!--|if $list_sub_sub_categories[$sub_category_id][sub_sub_category].name == $structure|--> current-sub <!--|/if|-->
                  ' title='<!--|$list_sub_sub_categories[$sub_category_id][sub_sub_category].name|-->' href='<!--|$list_sub_sub_categories[$sub_category_id][sub_sub_category].path|-->'>
                      <!--|$list_sub_sub_categories[$sub_category_id][sub_sub_category].name|-->
                  </a>
                </li>
              <!--|/section|-->
            </ul>
          </div>

          <!--|/if|-->
        </li>
      <!--|/section|-->
      <!--|/if|-->
    <!--|/section|-->
  </ul>

var sidebarMenu = function() {
  var menuItems = $('a.has-submenu');
  menuItems.each( function() {
    $(this).click( function(event) {
      event.preventDefault();
      $(this).siblings('div').slideToggle();
    })
  });
}
$(document).ready(function() { sidebarMenu(); });