javascript - 动态填充的大型菜单

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>

我已经覆盖了那个 block 并添加了一个非动态的菜单。它太大而且效率很低。大型菜单本质上是这个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了解更多详情