Menu icon Foundation
Dropdown container doesn't open on trigger

The section of code uses a menu item in a top bar to open a dropdown container. The problem is when I click the menu item, it doesn't open. Investigating it further I see it does open but closes again while going through the "trigger" method in "foundation.util.triggers.js".

HTML:

    <div class="top-bar">
        <div class="top-bar-left">
            <ul class="menu" data-dropdown-menu>
                <li class="menu-text"><span id="bshtitle"></span>&nbsp;<span id="bshappname"></span></li>
            </ul>
        </div>
        <div class="top-bar-right">
            <ul class="dropdown menu" data-dropdown-menu>
              <li>
                  <a id="lg_set"></a>
                  <ul class="menu">
                      <li><a id="lg_de"></a></li>
                      <li><a id="lg_en"></a></li>
                  </ul>
              </li>
              <li>
                  <a id="shp_crt" data-toggle="drop-cart">
                      <span class="fi-shopping-cart large"></span>
                      &nbsp;<span id="shp_cart_text"></span>&nbsp;(<span id="shp_cart_total">0</span>)
                  </a>
              </li>
            </ul>
        </div>
    </div>
    <div id="drop-cart" class="dropdown-pane" data-hover="false" data-dropdown data-auto-focus="true">
            <h3>Shopping Cart</h3>
    </div>

Code causing the problem:

  var triggers = function (el, type) {
    el.data(type).split(' ').forEach(function (id) {
      $('#' + id)[type === 'close' ? 'trigger' : 'triggerHandler'](type + '.zf.trigger', [el]);
    });
  };

When I pause the code, the dropdown container shows at the start of the forEach loop, but once the code inside the loop is called, the container disappears.

Any ideas?

dropdowncontainerstriggers

The section of code uses a menu item in a top bar to open a dropdown container. The problem is when I click the menu item, it doesn't open. Investigating it further I see it does open but closes again while going through the "trigger" method in "foundation.util.triggers.js".

HTML:

    <div class="top-bar">
        <div class="top-bar-left">
            <ul class="menu" data-dropdown-menu>
                <li class="menu-text"><span id="bshtitle"></span>&nbsp;<span id="bshappname"></span></li>
            </ul>
        </div>
        <div class="top-bar-right">
            <ul class="dropdown menu" data-dropdown-menu>
              <li>
                  <a id="lg_set"></a>
                  <ul class="menu">
                      <li><a id="lg_de"></a></li>
                      <li><a id="lg_en"></a></li>
                  </ul>
              </li>
              <li>
                  <a id="shp_crt" data-toggle="drop-cart">
                      <span class="fi-shopping-cart large"></span>
                      &nbsp;<span id="shp_cart_text"></span>&nbsp;(<span id="shp_cart_total">0</span>)
                  </a>
              </li>
            </ul>
        </div>
    </div>
    <div id="drop-cart" class="dropdown-pane" data-hover="false" data-dropdown data-auto-focus="true">
            <h3>Shopping Cart</h3>
    </div>

Code causing the problem:

  var triggers = function (el, type) {
    el.data(type).split(' ').forEach(function (id) {
      $('#' + id)[type === 'close' ? 'trigger' : 'triggerHandler'](type + '.zf.trigger', [el]);
    });
  };

When I pause the code, the dropdown container shows at the start of the forEach loop, but once the code inside the loop is called, the container disappears.

Any ideas?