无法在悬停时正确显示导航下拉列表中的所有数据

Question

你好，我是 NodeJs 的新手。我正在使用 EJS 和 Node.js 使网站动态化。我试图制作一个导航下拉菜单，其中包含三个级别，如下所示。：-

现在我试图模仿这一点，这就是我得到的：-

以下是我在 js 文件中尝试过的代码：-

 MainCategory.find({},function(err, mainCategories){
      if(err){
          console.log(err)
      }else{
        app.locals.mainCategoriesHeader= mainCategories;

        mainCategories.forEach(function(mainCategories){
          var MC = mainCategories.slug;
          Category.find({mainCategory:MC},function(err,categories){
            if(err){
              console.log(err)
            }else{
              if (typeof categories !== 'undefined' && categories.length > 0) {
                console.log(categories);
              app.locals.categoriesHeader= categories;
             } 
            }
          })
        })
      }
    })

Main Category为第一级，Category为第二级，产品为第三级。并非所有 Main 类别中都有类别。

显示的数据console.log(categories)如下：-

[ { itemtype: 'Category',
    _id: 5de132feae17c83f989afda1,
    title: 'Nuts',
    slug: 'nuts',
    mainCategory: 'fasteners',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de13341ae17c83f989afda2,
    title: 'Screws&Bolts',
    slug: 'screws&bolts',
    mainCategory: 'fasteners',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de13351ae17c83f989afda3,
    title: 'Inserts',
    slug: 'inserts',
    mainCategory: 'fasteners',
    __v: 0 } ]
[ { itemtype: 'Category',
    _id: 5de16904acc2f532d4dca9c6,
    title: 'Brass Neutral Links',
    slug: 'brass-neutral-links',
    mainCategory: 'brass-electrical-accessories',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de1691facc2f532d4dca9c7,
    title: 'Brass Terminal Contacts',
    slug: 'brass-terminal-contacts',
    mainCategory: 'brass-electrical-accessories',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16940acc2f532d4dca9c8,
    title: 'Brass Earth Terminal Blocks',
    slug: 'brass-earth-terminal-blocks',
    mainCategory: 'brass-electrical-accessories',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16963acc2f532d4dca9c9,
    title: 'Terminals For Connectors Earthing',
    slug: 'terminals-for-connectors-earthing',
    mainCategory: 'brass-electrical-accessories',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16999acc2f532d4dca9ca,
    title: 'Brass Pin For Electrical Plugs',
    slug: 'brass-pin-for-electrical-plugs',
    mainCategory: 'brass-electrical-accessories',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de169edacc2f532d4dca9cb,
    title: 'Copper & Aluminium Lugs',
    slug: 'copper-&-aluminium-lugs',
    mainCategory: 'brass-electrical-accessories',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16a01acc2f532d4dca9cc,
    title: 'Battery Terminal',
    slug: 'battery-terminal',
    mainCategory: 'brass-electrical-accessories',
    __v: 0 } ]
[ { itemtype: 'Category',
    _id: 5de16a2aacc2f532d4dca9cd,
    title: 'Aluminium Machined Parts',
    slug: 'aluminium-machined-parts',
    mainCategory: 'machined-parts',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16a5facc2f532d4dca9ce,
    title: 'Copper Machined Parts',
    slug: 'copper-machined-parts',
    mainCategory: 'machined-parts',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16a7bacc2f532d4dca9cf,
    title: 'Brass Machined Parts',
    slug: 'brass-machined-parts',
    mainCategory: 'machined-parts',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16abbacc2f532d4dca9d0,
    title: 'Forged Press or Hot Stamped',
    slug: 'forged-press-or-hot-stamped',
    mainCategory: 'machined-parts',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16ad3acc2f532d4dca9d1,
    title: 'Investment Casting',
    slug: 'investment-casting',
    mainCategory: 'machined-parts',
    __v: 0 },
  { itemtype: 'Category',
    _id: 5de16af6acc2f532d4dca9d2,
    title: 'SS Machined Parts',
    slug: 'ss-machined-parts',
    mainCategory: 'machined-parts',
    __v: 0 } ]

下面是 ejs 文件：-

<li class="menu-has-children"><a href="/productlanding">Products</a>
          <ul>
            <% mainCategoriesHeader.forEach(function(mainCategories){ %>
            <li class="menu-has-children"><a href="/category/<%= mainCategories.slug %>"><%= mainCategories.title %></a>
              <ul>  
                  <% categoriesHeader.forEach(function(categories){ %>                              
                <li class="menu-has-children"><a href="/subcategory/Nuts"><%= categories.title %></a>
                  <ul>
                    <li><a href="/product/Hex-Nuts">Hex Nuts</a></li>
                    <li><a href="/product/Flanged-Nut">Flanged Nut</a></li>
                    <li><a href="/product/Castle-Nuts">Castle Nuts</a></li>
                    <li><a href="/product/Hex-Jam_Nuts">Hex Jam Nuts</a></li>
                    <li><a href="/product/Heavy-Hex-Nuts">Heavy Hex Nuts</a></li>
                    <li><a href="/product/Square-Nuts">Square Nuts</a></li>
                    <li><a href="/product/Furniture-Cap-Nuts">Furniture Cap Nuts</a></li>
                    <li><a href="/product/Acorn-Nuts">Acorn Nuts</a></li>
                    <li><a href="/product/Wing-Nuts">Wing Nuts</a></li>
                    <li><a href="/product/Flare-Nuts">Flare Nuts</a></li>
                    <li><a href="/product/Lock-Nuts">Lock Nuts</a></li>
                    <li><a href="/product/Hex-Coupling-Nuts">Hex Coupling Nuts</a></li>
                  </ul>
                </li>

                <% }) %>
              </ul>
            </li>
            <% }) %>
          </ul>
        </li>

如何显示每个主要类别的类别和每个类别的产品。请帮帮我。我被困在这个问题上很长时间了。

Answer 1

在您的代码中，您有一个循环：

mainCategories.forEach(function(mainCategories){
              // removed code
              app.locals.categoriesHeader= categories;
              // removed code
        })

在这里，您正在app.locals.categoriesHeader为每次通过循环时被覆盖的值分配一个值。因此，machined-parts菜单中只显示最后一个类别 ( )。

您可以尝试将行app.locals.categoriesHeader= categories更改为mainCategories.subCategories= categories. 然后在您的模板中，而不是：

<% categoriesHeader.forEach(function(categories){ %>

你可以使用：

<% mainCategories.subCategories.forEach(function(categories){ %>