Question

我正在尝试将一个大型菜单实现到一个sparkpay商店。菜单是动态的。这是菜单代码的样子。

HTML：

<ul class="nav navbar-nav">
                    <li>
                      <div class="affix-logo">
                        <a href="/" class="logo_2">
                          <img src="/images/logo.png">
                        </a>
                      </div>
                    </li>
                    <ac:layoutarea id="Item">
                      <ac:visibilityarea id="phDDLink">

                        <li class="dropdown">
                          <a href="$$HREF$$" target="$$TARGET$$" data-toggle="">$$TEXT$$</a>
                          <ac:visibilityarea id="phSubMenu">
                            <ul class="dropdown-menu">$$SUBMENU$$</ul>
                          </ac:visibilityarea>
                        </li>
                      </ac:visibilityarea>
                      <ac:visibilityarea id="phNoDDLink">
                        <li>
                          <a href="$$HREF$$" target="$$TARGET$$">$$TEXT$$</a>
                        </li>
                      </ac:visibilityarea>
                    </ac:layoutarea>

                  </ul>

我已经覆盖了该块并添加了一个非动态的菜单。它太大而且效率很低。巨型菜单本质上是这个codepen： https://codepen.io/iamgonge/pen/QpOgZB。该菜单使用五列和四列布局。我是一名实习生，我正在努力给人留下好印象。我目前的解决方案很糟糕。我想用动态填充的大型菜单让我的老板大吃一惊，我只是不知道从哪里开始。

Answer 1

我认为您正在寻找的是使用AJAX。首先需要确定保存菜单字段的位置 - 它们可以位于json文件或数据库中。

如果是数据库 - 然后，您需要在PHP（服务器端）中编写一个中间层，它将连接到数据库并具有将数据加载到本地对象的功能。

使用AJAX，您可以在页面加载时调用函数以从该PHP脚本中获取数据。

以下链接描述了与您尝试实现的内容类似的内容，不同之处在于此内容会在点击时将数据加载到模式中。

您需要更改该部分，以便在页面加载时调用AJAX函数。

To pass dynamic data to a bootstrap modal

请注意，这只是您实现此功能的众多方法之一。希望这会有所帮助。

编辑 - 请注意，这是后端数据获取的一般方法，在您的情况下，如果您想要非常特定于菜单，那么您希望将其保存在json文件中，然后将其加载到菜单中。

请参阅：Creating a Menu from JSON了解更多详情

动态填充的超级菜单

1 个答案: