使用css的动态页面添加方法答案

【问题标题】：Dynamic page adding method with css使用css的动态页面添加方法
【发布时间】：2016-01-06 19:14:23
【问题描述】：

我目前正在使用 jQuery.mmenu 插件开发一个动态菜单。

我的菜单的定义（nav + ul）是静态的，写入index.html

子菜单是我在 jQuery(document).ready 部分打开的外部 html 页面，并添加了 append 功能。

我的问题位于表单上：

Good version / bad version

在左侧，您可以看到标准和静态实现，

使用我的解决方案，CSS 似乎不适用。

我的代码：

index.html：

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="www.frebsite.nl" />
        <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />

        <title>jQuery.mmenu demo</title>

        <link type="text/css" rel="stylesheet" href="css/demo.css" />
        <link type="text/css" rel="stylesheet" href="../dist/core/css/jquery.mmenu.all.css" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="../dist/core/js/jquery.mmenu.min.all.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function( $ ) {  
                var $menu = $("#menu").mmenu({
                       "extensions": [
                          "pageshadow"
                       ],
                       "counters": true,
                       "navbar": {
                          "title": "Ressource List"
                       },
                       "navbars": [
                          {
                             "position": "top",
                             "content": [
                                "searchfield"
                             ]
                          },
                          {
                             "position": "top",
                             "content": [
                                "prev",
                                "title",
                                "close"
                             ]
                          }
                       ],
                       "sectionIndexer": true
                });

                var api = $("#menu").data( "mmenu" );

                api.bind( "init", function() {

                    $.ajax({
                        // options to retrieve the submenu
                        url:"include/menu.html",
                        type : 'GET',
                        dataType : 'html'
                    }).success(function(data) {
                        var $ul = $menu.find( "#panel" );
                        $ul.append(data);
                        $("body").addClass("body");
                    });                   

                });

                api.init( $("#panel") );

            });
        </script>   
    </head>

    <body>
        <!-- The page -->
        <div class="page">
            <div class="header">
               <a href="#menu"></a>
               Index
            </div>
        </div>

        <!-- The menu -->
        <nav id="menu">
            <ul id="panel">

            </nav>
        </nav>
   </body>
</html>

menu.html

    <ul>
    <li><a href="">Home</a></li>
    <li><span>Room</span>
        <ul>
            <li><a href="">Room11</a></li>
            <li><a href="">Room12</a></li>
        </ul>
    </li>
    <li><span>Room2</span>
        <ul>
            <li><a href="">Room21</a></li>
            <li><a href="">Room22</a></li>
        </ul>
    </li>
    <li><a href="">Update data</a></li>
</ul>

为了简化问题，我使用了包中包含的基本示例：http://mmenu.frebsite.nl/download.html

你能帮帮我吗？

【问题讨论】：

标签： javascript css dynamic mmenu

【解决方案1】：

不确定这是否会影响...

您的 ul 标记缺少结束标记。

另外...在您的成功回调中，您有代码：

var $ul = $menu.find( "#panel" );
$ul.append(data);

如果您尝试获取面板中的第一个列表。应该是：

var $ul = $menu.find( "#panel>ul" );
$ul.append(data);

jQuery.mmenu 插件似乎重新排列了标记。

适用于 1 级：

var $menu = $('nav#menu').mmenu();
var api = $('nav#menu').data('mmenu');
$('#btnAdd').click(function () {
    var $ul = $menu.find('#test>ul');
    $ul.append('<li><a href="#">Home12</a></li>\
                <li><a href="#about">About us</a></li>\
                <li><a href="#contact">Contact</a></li>');
});

<button id="btnAdd">Add</button>
<nav id="menu">
    <ul id="test"></ul>
</nav>

这仅适用于一个级别。如果我尝试添加嵌套列表项，它似乎不起作用。

不适用于嵌套级别：

$ul.append('<li><a href="#">Home12</a></li>\
        <li><a id="about2" href="#about">About us</a><ul><li><a href="#about">About us</a></li></ul></li>\
        <li><a href="#contact">Contact</a></li>');

这个 github 线程可能会有所帮助...

在帖子底部，用户 FrDH 提供了一个可以帮助您的示例。
链接：https://github.com/FrDH/jQuery.mmenu/issues/57

【讨论】：

感谢您的回答，最后我通过在 menu.html 中添加类找到了解决方法