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/

段跨度