如何在drupal 8上创建一个bootstrap手风琴菜单？

Question

你好，我正试图在Drupal 8上建立一个手风琴菜单，但需要一点帮助，如何为动态菜单写出正确的结构和正确的数据目标。

我试着在stackoverflow上搜索，但没有找到正确的答案。我试图实现bootstrap文档中的基本卡片风格的手风琴。https:/getbootstrap.comdocs4.3componentscollapse#accordion-example。

下面是我想修改的代码，这对bootstrap下拉菜单是有效的，但我们特别需要手风琴功能来工作，而不是下拉菜单。

{#
/**
 * @file
 * Default theme implementation to display a menu.
 *
 * Available variables:
 * - menu_name: The machine name of the menu.
 * - items: A nested list of menu items. Each menu item contains:
 *   - attributes: HTML attributes for the menu item.
 *   - below: The menu item child items.
 *   - title: The menu link title.
 *   - url: The menu link url, instance of \Drupal\Core\Url
 *   - localized_options: Menu link localized options.
 *   - is_expanded: TRUE if the link has visible children within the current
 *     menu tree.
 *   - is_collapsed: TRUE if the link has children within the current menu tree
 *     that are not currently visible.
 *   - in_active_trail: TRUE if the link is in the active trail. 
 *
 * @ingroup templates
 */
#}
{% import _self as menus %}

{#
  We call a macro which calls itself to render the full tree.
  @see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul id="menu" {{ attributes.addClass('navbar-list','menu', 'nav', 'navbar-nav') }}>
    {% else %}
      <ul {{ attributes.addClass('dropdown-menu') }}>
    {% endif %}
    {% for item in items %}
        {%
        set classes = [
        'navbar-item',
        item.is_expanded ? 'menu-item--expanded',
        item.is_expanded ? 'dropdown',
        item.is_collapsed ? 'menu-item--collapsed',
        item.in_active_trail ? 'menu-item--active-trail',
        item.in_active_trail ? 'active',
        ]
        %}
      {% if menu_level == 0 and item.is_expanded %}
        <li{{ item.attributes.addClass( classes,'expanded', 'dropdown') }}>
        <a href="{{ item.url }}" class="navbar-link dropdown-toggle" data-target="#" data-toggle="dropdown"> {{ item.title }} <span class="caret"></span></a>
      {% else %}
        <li{{ item.attributes.addClass( classes,'item') }}> 
        {#{{ link(item.title, item.url) }}#} 
        {{ link(item.title, item.url, { 'class':['navbar-link']}) }}
      {% endif %}
      {% if item.below %}
        {{ menus.menu_links(item.below, attributes.removeClass('nav', 'navbar-nav'), menu_level + 1) }}
      {% endif %}
      </li>
    {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}

我想让它的输出和bootstrap文档中的下拉菜单一样。任何帮助都将被感激! 非常感谢。

Answer 1

{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
  
  {% set ip = 1 %}
    {% if menu_level == 0 %}
      <ul{{ attributes.addClass('nav navbar-nav').setAttribute('id', 'accordion') }}>
    {% else %}
      <ul class="sub-menu card-body">
	  
    {% endif %}
    {% for item in items %}
      {%
        set classes = [
          menu_level ? 'sub-item' : 'nav-item',
          item.in_active_trail ? 'active',
          item.below ? 'card',
        ]
      %}
      <li{{ item.attributes.addClass(classes) }}>
        {%
          set link_classes = [
            not menu_level ? 'nav-link',
            item.in_active_trail ? 'active',
            item.url.getOption('attributes').class ? item.url.getOption('attributes').class | join(' '),
            'nav-link-' ~ item.url.toString() | clean_class,
          ]
        %}
        {% if item.below %}
		{% if item.in_active_trail %}
		<div class="card-header" id="heading{{ip}}">
		<button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{ip}}" aria-expanded="true" aria-controls="collapse{{ip}}">
             
          {{ item.title }}
         </button>
		 </div>

		 <div id="collapse{{ip}}" class="collapse show" aria-labelledby="heading{{ip}}" data-parent="#accordion">
		  {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
		  {% else %}
		  <div class="card-header" id="heading{{ip}}">
		<button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{ip}}" aria-expanded="false" aria-controls="collapse{{ip}}">
             
          {{ item.title }}
         </button>
		 </div>

		 <div id="collapse{{ip}}" class="collapse" aria-labelledby="heading{{ip}}" data-parent="#accordion">
		  {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
		 {% endif %} 
		{% set ip = ip + 1 %}  
		</div>
        {% else %}
          {{ link(item.title, item.url, {'class': link_classes}) }}
		  
        {% endif %}
		
      </li>
	
    {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}