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相同的高级结构。 / p>

Answer 1

通过一些更多的实验，我发现我的HTML有点偏。我创建的LI元素中的锚点应该是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/

Jquery Mmenu上一个按钮不起作用

1 个答案: