css动态页面添加方法

Question

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

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

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

我的问题在表格上：

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

你能帮帮我吗？

Answer 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 提供了一个可能对您有所帮助的示例。
Link: https://github.com/FrDH/jQuery.mmenu/issues/57

css动态页面添加方法

Dynamic page adding method with css

javascript

css

dynamic

mmenu

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

适用于 1 个级别：

不适用于嵌套关卡：

这个 github 帖子可能会有所帮助...