Question

我无法动态创建菜单。我之前有一个简单的菜单，但都有效，但不得不转向响应式设计。现在我从这里使用菜单：http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html 静态创建（在HTML中）一切都很好。要动态创建我使用代码：

      $('#wsnmotes > ul').append(

    '<li class="subfirst" id="wsnnode"><a val='wsnnode' href="#"><i class="fa fa-plus-square"></i>&nbsp;mote name:X1</a>'+
        '<ul class="dropdown-menu">'+

            '<li><a id='discover' href="#"><i class="fa fa-question-circle"></i>&nbsp;Discover</a> </li>'+
            '<li><a id='moteconfig' href="#"><i class="fa fa-info-circle"></i>&nbsp;Mote Config</a></li>'+
            '<li><a id='sensors' href="#"><i class="fa fa-th-list"></i>&nbsp;Sensors</a>'+ 
                '<ul class="dropdown-menu">'+

                    '<li class="subfirst"><a val='chart' dev='accel' href="#">accel</a></li>'+
                    '<li><a val='chart' dev='voltage' href="#">voltage</a></li>'+
                    '<li><a val='chart' dev='temperature' href="#">temperature</a></li>'+
                    '<li><a val='chart' dev='light' href="#">light</a></li>'+
                    '<li><a val='chart' dev='io' href="#">i/o</a></li>'+
                    '<li><a val='chart' dev='pwm' href="#">pwm</a></li>'+

                '</ul>'+
            '</li>'+
            '<li><a id='actuators' href="#"><i class="fa fa-wrench"></i>&nbsp;Actuators</a>'+  
                '<ul class="dropdown-menu">'+

                    '<li class="subfirst"><a val='chart' dev='accel' href="#">accel</a></li>'+
                    '<li><a val='chart' dev='voltage' href="#">voltage</a></li>'+
                    '<li><a val='chart' dev='temperature' href="#">temperature</a></li>'+
                    '<li><a val='chart' dev='light' href="#">light</a></li>'+
                    '<li><a val='chart' dev='io' href="#">i/o</a></li>'+
                    '<li><a val='chart' dev='pwm' href="#">pwm</a></li>'+

                '</ul>'+ 
              '</li>'+   
            '</ul>'+

            '</li>'

            );

......没有任何反应。

Answer 1

问题是使用单引号打破javascript代码，使用双引号或使用转义字符\来使用单引号

              <a val=\'wsnnode\' href="#">

或

              <a val="wsnnode" href="#">

Answer 2

感谢你，但仍然没有解决方案。找到导致问题的原因，但不知道如何修复。以下简化示例似乎有效，但具有奇怪的样式：但是放置class =＆＃34;下拉菜单＆＃34;在ul里面，让一切都消失了。静态时，相同的代码有效。

    // test 05/03/2015
 $('#Action').click(function(){
  //alert("Action");
  $("#wsnmotes > ul").append(
    '<li id="wsnnode"><a val="wsnnode" href="#"><i class="fa fa-plus-square"></i>&nbsp;mote name: L1</a>'+
      '<ul id="sub1">'+
        '<li><a id="discover" href="#"><i class="fa fa-question-circle"></i>&nbsp;Discover</a> </li>'+
        '<li><a id="moteconfig" href="#"><i class="fa fa-info-circle"></i>&nbsp;Mote Config</a></li>'+
      '</ul>'+
      '</li>'
  );

  //$("#sub1").addClass("dropdown-menu");
  });                

                                                         however when placing class="dropdown-menu" inside the ul makes everything disappear. Any advice, please?

Jan

努力动态创建菜单

2 个答案: