Question

自从我开始使用NetBeans编程以来，我不得不为我使用的每个页面创建一个HTML菜单，这开始非常耗时，因为如果我有很多页面，我必须返回并编辑每个页面得到更新。这就是我的菜单使用HTML查看的时刻：

            <ul class="sidebar-menu">
            <li class="header">MAIN NAVIGATION</li>
            <li class="treeview active">
            <a href="#">
                <i class="fa fa-edit"></i> <span>Projects</span>
                <i class="fa fa-angle-left pull-right"></i>
            </a>
            <ul class="treeview-menu">
                <li class="active"><a href="offers.html"><i class="fa fa-circle-o"></i>Offers</a></li>
                <li class="active"><a href="mobilecarriers.html"><i class="fa fa-circle-o"></i>Mobile Carriers</a></li>
                <li class="active"><a href="affiliatepixel.html"><i class="fa fa-circle-o"></i>Affiliate Pixel Tracking</a></li>
                <li class="active"><a href="carrierip.html"><i class="fa fa-circle-o"></i>Carrier IP</a></li>
                <li class="active"><a href="UpdtConvStats.html"><i class="fa fa-circle-o"></i>Update Conversion Status</a></li>
                <li class="active"><a href="GetConvData.html"><i class="fa fa-circle-o"></i>Get Conversions Data</a></li>
                <li class="active"><a href="UpdtConv.html"><i class="fa fa-circle-o"></i>Update Conversions P/R</a></li>
            </ul>
            </li>
        </ul>

现在为了避免在所有页面上重复菜单，我想只使用Javascript代码创建一个菜单。我已经尝试过建造，但它并没有达到我所瞄准的目标;例如：我需要在文本之前有图标，所有显示的都是所有这些的DOT，我还需要创建子菜单，但我还没有找到一种方法来做到这一点。谁能告诉我这个代码是否适用于我的目的？如果没有，有人可以帮我吗？

(function(){

var dirs=window.location.href.split('/'),
cdir=dirs[dirs.length-2];

var dir_ofertas = "";
var dir_teste = "";

if (cdir === "Ofertas") {
    dir_teste = '../teste/';      
}

else if (cdir === "teste") {
    dir_ofertas = '../Ofertas/';        
}
var navItems = [
    {href: dir_ofertas + 'offers.html', text: 'Offers'},
    {href: dir_ofertas + 'mobilecarriers.html', text: 'Mobile Carriers'},
    {href: dir_teste + 'index.html', text: 'Test'}
];

var navElem = document.createElement("nav"),
    navList = document.createElement("ul"), 
    navItem, navLink;

navElem.appendChild(navList);

for (var i = 0; i < navItems.length; i++) {
    navItem = document.createElement("li");
    navLink = document.createElement("a");
    navLink.href = navItems[i].href;
    navLink.innerHTML = navItems[i].text;
    navItem.appendChild(navLink);
    navList.appendChild(navItem);
}
navList.children[0].className = "current";

window.onload = function () {
    document.getElementById('leftNav').appendChild(navElem);
};

}());

Answer 1

你可以使用.innerHtml或.html（jquery）将html注入文档中，例如

你可以制作经过的代码并生成html然后将其注入页面（这适用于网页？或应用程序？）

现在上述方法的问题是CSS有时无法正确使用它。

最后，我建议调查一下php。在一个项目中，我使用php调用一个python脚本，输出是一个下拉菜单，制作一个动态下拉菜单，我有所有项目。

编辑：忘了问，这是一次性事吗？生成菜单，还是需要动态重新生成？

Answer 2

我建议你使用jquery;它使得所有javascript生成的Web内容更容易阅读，并且不难学习。例如，您可以创建一个对象，该对象包含DOM中存在的所有DOM元素

var myButton=$('<div class="button">ventas</div>');

您可以使用此方法进行任何jQuery操作，例如

myButton.addClass('red');
myButton.append('myMenu');

因此，您可以创建一个将json转换为菜单的函数

menu=[
   {
     name:"inicio",
     url:"http://www.cl"
   }
]

等等。只是一个想法。然后你的对象结构看起来像

myMenu=[
   {
      name:"inicio",
      $element=('<div id="menu-inicio-0" class="top-menu">inicio</div>');
   },
   {
      name:"cuenta",
      $element=('<div id="menu-inicio-0" class="top-menu">inicio</div>'),
      children=[

          {
           name:"password",
           $element=('<div id="menu-inicio-0" class="top-menu">inicio</div>'),
        },
        {...}

      ]
   }
]

在jquery中，你可以为每个元素添加点击监听器，如上所述，甚至在添加到DOM之前（仅当你通过使用它携带变量来引用元素时，没有Id或Class调用）

for each button{
   $thisButton.on("click",function(){
      showSubMenuOrFollowLink();
   });
}

你可以采用与vanilla javascript类似的方法，但当然这要困难得多。总而言之，我建议您探索为每个按钮设置对象的可能性，将DOM元素作为变量，以便您可以轻松地参考它们。

希望这有帮助！

如何仅使用javascript代码创建菜单

2 个答案: