Странное поведение PdoMenu

Всем привет!

Решил организовать 2-х уровневое меню на navbar от Bootstrap 4.

Скрин структуры в приложении.

Код из примера следующий:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
Вывожу:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
	<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<a class="navbar-brand" href="#">Navbar</a>
	<div class="collapse navbar-collapse" id="navbarNavDropdown">

        [[!pdoMenu?
        &level=`2`
        &parents=`0`
        &outerClass=`navbar-nav`
        &&tplInnerHere=`@INLINE <li class="nav-item active">
            <a class="nav-link" href="[[+link]]" [[+attributes]]>[[+menutitle]] <span class="sr-only">(current)</span></a>[[+wrapper]]
        </li>`
        &tpl=`@INLINE <li class="nav-item">
            <a class="nav-link" href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]
        </li>`
        &tplOuter=`@INLINE <ul [[+classes]]>[[+wrapper]]</ul>`
        &tplInner=`@INLINE <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> [[+wrapper]] </div>`
        &tplParentRow=`@INLINE
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                [[+menutitle]]
            </a>
            [[+wrapper]]
        </li>`
        ]]

	</div>
</nav>
В итоге получаю:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
   <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
   <a class="navbar-brand" href="#">Navbar</a>
   <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
         <li class="nav-item">
            <a class="nav-link" href="/">Главная</a>
         </li>
         <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            О нас
            </a>
            <div class="dropdown-menu" href="http://new.bis-lab.ru/" aria-labelledby="navbarDropdownMenuLink"> </div>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="about-us/about-the-company.html">О компании</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="about-us/certificates.html">Сертификаты</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="about-us/lending.html">Кредитование</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="about-us/feedback-and-suggestions.html">Отзывы и предложения</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="about-us/terms-of-delivery.html">Условия доставки</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="about-us/jobs.html">Вакансии</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="about-us/store-details.html">Реквизиты магазина</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="about-us/price.html">Прайс</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="about-us/competitions-(tendering).html">Конкурсы (Торги)</a>
         </li>
      </ul>
   </div>
   <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Каталог
      </a>
      <div class="dropdown-menu" href="http://new.bis-lab.ru/" aria-labelledby="navbarDropdownMenuLink"> </div>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="directory/office-equipment/">Оргтехника</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="service.html">Сервис</a>
   </li>
   <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Новости
      </a>
      <div class="dropdown-menu" href="http://new.bis-lab.ru/" aria-labelledby="navbarDropdownMenuLink"> </div>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="news/printing-technology-micropiezo.html">Технология печати MicroPiezo</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="news/the-main-signs-of-failure-of-an-inkjet-printer.html">Основные признаки поломки струйного принтера</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="news/copy-print-technology-micropiezo.html">Копия Технология печати MicroPiezo</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="news/copy-print-technology-micro-piezo.html">Копия Технология печати Micro Piezo</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="contacts.html">Контакты</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="basket.html">Корзина</a>
   </li>
</nav>
И видим что в tplInner не попадают ресурсы из данного раздела.
Меняем div на ul в
&tplInner=`@INLINE <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> [[+wrapper]] </div>`
Все ок! Но тогда не работает выпадение при клике.

Что такое может быть?
И второй вопрос как вывести отображение строки из выпадающего списка в таком виде
<a class="dropdown-item" href="#">Action</a>
Заранее спасибо!
Иван Бочкарев
28 мая 2017, 03:16
modx.pro
1 766
0
Поблагодарить автора Отправить деньги

Комментарии: 3

Волков Николай
28 мая 2017, 09:17
+1
Попробуй так:
[[pdoMenu?
	&parents=`0`
	&level=`2`
	&firstClass=``
	&lastClass=``
	&outerClass=`navbar-nav`
	&innerClass=`dropdown-menu`
	&parentClass=`dropdown`
	&rowClass=`nav-item`
	&tpl=`@INLINE <li{$classes}><a class="nav-link" href="{$link}">{$menutitle}</a>{$wrapper}</li>`
	&tpl
	&tplInnerRow=`@INLINE <a class="dropdown-item" href="{$link}">{$menutitle}</a>{$wrapper}`
	&tplParentRow=`@INLINE
	<li{$classes}>
		<a class="nav-link dropdown-toggle" href="{$link}" id="navbarDropdownMenuLink-{$id}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{$menutitle}</a>
		<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-{$id}">
			{$wrapper}
		</div>
	</li>`
	&tplHere=`@INLINE <li{$classes}><a class="nav-link" href="{$link}">{$menutitle} <span class="sr-only">(current)</span></a>{$wrapper}</li>`
	&tplInnerHere=`@INLINE <a class="dropdown-item active" href="{$link}">{$menutitle}</a>{$wrapper}`
]]
    Волков Николай
    28 мая 2017, 09:23
    1
    +1
    Меняем div на ul в
    &tplInner=`@INLINE [[+wrapper]] `Все ок! Но тогда не работает выпадение при клике.
    Скорее всего из-за дублирования ссылок и индентификаторов блоков с содержимым выпадашки. Нужно сделать уникальным этот индентификатор:
    navbarDropdownMenuLink
    Я, к примеру, это сделал дописав у него в конце id родительского ресурса:
    navbarDropdownMenuLink-{$id}
      Иван Бочкарев
      29 мая 2017, 05:08
      0
      Спасибо огромное!

      Заработало с таким кодом:
      [[!pdoMenu?
              &parents=`0`
              &level=`2`
              &firstClass=``
              &lastClass=``
              &outerClass=`navbar-nav`
              &parentClass=`dropdown`
              &rowClass=`nav-item`
              &tpl=`@INLINE <li{$classes}><a class="nav-link" href="{$link}">{$menutitle}</a>{$wrapper}</li>`
              &tplInnerRow=`@INLINE <a class="dropdown-item" href="{$link}">{$menutitle}</a>{$wrapper}`
              &tplInner=`@INLINE {$wrapper}`
              &tplParentRow=`@INLINE
              <li{$classes}>
                  <a class="nav-link dropdown-toggle" href="{$link}" id="navbarDropdownMenuLink-{$id}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{$menutitle}</a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-{$id}">
                      {$wrapper}
                  </div>
              </li>`
              &tplHere=`@INLINE <li{$classes}><a class="nav-link" href="{$link}">{$menutitle} <span class="sr-only">(current)</span></a>{$wrapper}</li>`
              &tplInnerHere=`@INLINE <a class="dropdown-item active" href="{$link}">{$menutitle}</a>{$wrapper}`
              ]]
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      3