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结构不好，但是我发现doc网站上的一个演示正在实现我想要的东西（http://mmenu.frebsite.nl/demo/index.html?demo=app-settings&menu=default），它具有与我的HTML相同的高级结构。

Answer 1

通过一些更多的实验，我发现我的HTML是一点点关闭。 在我创建的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/

段跨度