Создайте вложенное выпадающее меню (nav-bar) в Aurelia, используя Materialise - PullRequest
Новая
       29

Создайте вложенное выпадающее меню (nav-bar) в Aurelia, используя Materialise

1 голос
/ 29 апреля 2019

Я хочу создать навигационную панель под вложенными выпадающими меню в Aurelia, используя Materialize. Я очень старался. 

     <span repeat.for="item of menuItems">
    <ul id="${item.target}"  data-beloworigin="true" class='dropdown-content nested' if.bind="item.type==3"  role="menu">
      <li repeat.for="item of item.items" class.bind="item.class" role.bind="item.role">
        <a if.bind="item.type==3" href="#" class.bind="item.class"role="button" aria-haspopup="true" aria-expanded="false"   href='#' data-target="${item.target}" data-hover="hover" data-alignment="left" > Secondary  ${item.label}
          <span class="caret"></span>
        </a>
        <a if.bind="item.type==0" href.bind="item.url"> ${item.label}</a>
        <a if.bind="item.type==1" href="#" click.delegate="menu(item.param)">  ${item.label}</a>
        </li>
    </ul>
        <ul  if.bind="item.type==3" id="${item.target}" class='dropdown-content'  >
          <li repeat.for="item of item.items" class.bind="item.class" role.bind="item.role">
            <a if.bind="item.type==3" href="#" role="button" aria-haspopup="true"   aria-expanded="false"> ${item.label}
              <span class="caret"></span>
            </a>
            <a if.bind="item.type==0" href.bind="item.url" > Third ${item.label}</a>
            <a if.bind="item.type==1" href="#" click.delegate="menu(item.param)">  ${item.label}</a>
          </li>
        </ul>
  </span>
  <nav class="navbar-default d-flex align-items-center">
    <div class="nav-wrapper">
      <ul class="right hide-on-med-and-down" >
        <li repeat.for="item of menuItems" class.bind="item.class" role.bind="item.role">
          <a if.bind="item.type==3" href="#" class='dropdown-button btn' beloworigin="true" data-target="${item.target}" role="button"
            aria-haspopup="true" aria-expanded="false" >${item.label}

          </a>
          </li>
      </ul>
    </div>
  </nav>

menuItems получает меню из файла Menu.ts.Тип 3 используется для родительского меню. Тип 0 - это меню, которые будут выполняться по URL-адресу при нажатии раскрывающегося меню.

Я хочу, чтобы при выполнении этого кода была создана строка меню, в которой я нажимал на раскрывающееся меню, а затем связанное с ним подменю.должен быть открыт.

1 Ответ

1 голос
/ 30 апреля 2019

После некоторой модификации Мой код работает. 

  <span repeat.for="item of menuItems">
    <ul id="${item.target}" class='dropdown-content' if.bind="item.type==3" class.bind="item.class">
      <li repeat.for="item of item.items" class.bind="item.class">
        <a if.bind="item.type==3" href="#" class='dropdown-button' data-hover="hover" data-alignment="left"
          data-target="${item.target}" href='#'> Secondary ${item.label}
          <a if.bind="item.type==0" href.bind="item.url">${item.label}</a>
          <a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
        </a>
        <ul id="${item.target}" class='dropdown-content' class.bind="item.class">
          <li repeat.for="item of item.items" class.bind="item.class">
            <a if.bind="item.type==0" href.bind="item.url">${item.label}</a>
            <a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </span>

  <nav class="navbar-default row mb-0 d-flex align-items-center">
    <div class="nav-wrapper col s12">
      <a href="#" class="left home"><i class="icon icon-propriete"></i></a>
      <ul class="right hide-on-med-and-down">
        <li repeat.for="item of menuItems" class.bind="item.class" role.bind="item.role">
          <a if.bind="item.type==3" href="#" class="dropdown-trigger" data-target="${item.target}">${item.label}

          </a>
        </li>
      </ul>
    </div>
  </nav>
...