Jquery Mmenu 上一个按钮不起作用

Question

我正在尝试创建一个内容丰富的菜单(具有高级 HTML 的面板)。我已经按照 mmenu 站点上的文档进行操作，但是发现缺少上一个按钮(将菜单转换回上一张幻灯片的按钮)。进一步检查时，我看到该元素在那里，但没有任何内部 HTML(需要出现 css 箭头)，也没有跟踪我当前所在的面板:

<div class="body container">
  <div class="row">
  <nav id="component-menu" class="row col-xs-4">
    <div id="home" class="">
      <ul>
        <li><a href="#style-components-panel">Style Components</a></li>
        <li><a href="#select-components-panel">Select Components</a></li>
      </ul>
    </div>
    <div id="style-components-panel" class="styling-menu row">
      <div class="col-xs-6"><p>Effect all components</p></div>
      <div class="col-xs-6 text-right">
        <label class="switch">
          <input id="effectAllComponents" type="checkbox" checked>
          <div class="slider round"></div>
        </label>                                                
      </div>
      <div id="colorPicker" class="color-picker col-xs-12"></div>
      <div id="color-field-container" class="col-xs-12 row"></div>
    </div>
    <div id="select-components-panel" class="component-menu row">
      <div id="component-container" class="row component-container">
        <div class="component col-xs-12" data-id="product">
          <img src="imgs/product.jpg" width="280" height="98" />
        </div>
        <div class="component col-xs-12" data-id="product_large">
          <img src="imgs/product_large.jpg" width="280" height="98" />
        </div>
        <div class="component col-xs-12" data-id="products">
          <img src="imgs/products.jpg" width="280" height="98" />
        </div>
        <div class="component col-xs-12" data-id="product_alt">
          <img src="imgs/product_alt.jpg" width="280" height="98" />
        </div>
        <div class="component col-xs-12" data-id="product_center">
          <img src="imgs/product_center.jpg" width="280" height="98" />
        </div>
        <div class="component col-xs-12" data-id="product_small">
          <img src="imgs/product_small.jpg" width="280" height="98" />
        </div>
      </div>
    </div>
  </nav>
  <div class="mm-page col-xs-8">
      <p>hello mukhtar</p>
      </div>
   </div>
</div>

( https://jsfiddle.net/hwh596eu/2/ )

我认为我的 HTML 结构不好，但我看到文档网站上的一个演示实现了接近我想要的东西 ( http://mmenu.frebsite.nl/demo/index.html?demo=app-settings&menu=default )，具有与我的 HTML 相同的高级结构。

Answer 1

通过更多的实验，我发现我的 HTML 有点不对劲。我创建的 LI 元素中的 anchor 应该是 LI 中的跨度，它们链接到的部分也应该在同一个 LI 中

<div class="body container">
 <div class="row">
  <nav id="component-menu" class="row col-xs-4">
    <div id="home" class="">
      <ul>
        <li>
          <span>Style Components</span>
          <div id="style-components-panel" class="styling-menu row">
            <div class="col-xs-6"><p>Effect all components</p></div>
            <div class="col-xs-6 text-right">
              <label class="switch">
                <input id="effectAllComponents" type="checkbox" checked>
                <div class="slider round"></div>
              </label>                                              
            </div>
            <div id="colorPicker" class="color-picker col-xs-12"></div>
            <div id="color-field-container" class="col-xs-12 row"></div>
          </div>
        </li>
        <li>
          <span>Select Components</span>
          <div id="select-components-panel" class="component-menu row">
            <div id="component-container" class="row component-container">
              <div class="component col-xs-12" data-id="product">
                <img src="imgs/product.jpg" width="280" height="98" />
              </div>
              <div class="component col-xs-12" data-id="product_large">
                <img src="imgs/product_large.jpg" width="280" height="98" />
              </div>
              <div class="component col-xs-12" data-id="products">
                <img src="imgs/products.jpg" width="280" height="98" />
              </div>
              <div class="component col-xs-12" data-id="product_alt">
                <img src="imgs/product_alt.jpg" width="280" height="98" />
              </div>
              <div class="component col-xs-12" data-id="product_center">
                <img src="imgs/product_center.jpg" width="280" height="98" />
              </div>
              <div class="component col-xs-12" data-id="product_small">
                <img src="imgs/product_small.jpg" width="280" height="98" />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
  <div class="mm-page col-xs-8">
  <p>hello joe</p>
  </div>

https://jsfiddle.net/hwh596eu/4/