我正试图在我的wordpress网站上添加一个硬编码的“megamenu”风格的下拉div。

div本身的内容不需要通过wordpress进行管理，它将全部进行硬编码。

我不想使用插件，我创建“walker”类的尝试也失败了，所以我想知道jQuery现在是否是前进的方向。

使用以下功能，我可以将单词“Hello”添加到导航项中，但是如果我将其更改为div的内容，它将根本不会显示。诚然，我现在有点抓紧救命稻草。。。

作品

  $("#mainMenu ul li.page-item-13").append("<strong>Hello</strong>");`

    $(document).ready(function(){

                $("#mainMenu ul li.page-item-13 a").append("
<div id=\\"megaMenu\\">
            <div id=\\"megaMenuCopy\\">
              <h3>The Range</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet sapien ut quam tristique sed volutpat lectus blandit. Nullam ornare massa faucibus tellus blandit et fringilla urna interdum. Integer accumsan, libero eu vestibulum eleifend, odio enim semper urna, nec vestibulum eros magna id diam. Morbi a nibh quam, id pharetra turpis. Aenean arcu justo, semper at elementum in, hendrerit quis urna.</p>
              <p>Donec id lectus enim, eget suscipit lorem. Sed cursus consectetur lectus sed interdum. In et congue elit. Cras quam diam, pellentesque quis sollicitudin aliquam, tempus nec orci.</p>
            </div>
            <ul>
              <li id=\\"t43\\"><a href=\\"#\\">T43</a></li>
              <li id=\\"t47\\"><a href=\\"#\\">T47</a></li>
              <li id=\\"t495\\"><a href=\\"#\\">T495</a></li>
              <li id=\\"t535\\"><a href=\\"#\\">T535</a></li>
              <li id=\\"t535\\"><a href=\\"#\\">T535</a></li>
              <li id=\\"t575\\"><a href=\\"#\\">T575</a></li>
              <li id=\\"t575\\"><a href=\\"#\\">T575</a></li>
            </ul>
            <div class=\\"clearBoth\\"></div>
          </div>");

           });

           $(document).ready(function(){

                $("#mainMenu ul li.page-item-13").append("
<div id="megaMenu">
            <div id="megaMenuCopy">
              <h3>The Range</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet sapien ut quam tristique sed volutpat lectus blandit. Nullam ornare massa faucibus tellus blandit et fringilla urna interdum. Integer accumsan, libero eu vestibulum eleifend, odio enim semper urna, nec vestibulum eros magna id diam. Morbi a nibh quam, id pharetra turpis. Aenean arcu justo, semper at elementum in, hendrerit quis urna.</p>
              <p>Donec id lectus enim, eget suscipit lorem. Sed cursus consectetur lectus sed interdum. In et congue elit. Cras quam diam, pellentesque quis sollicitudin aliquam, tempus nec orci.</p>
            </div>
            <ul>
              <li id="t43"><a href="#">T43</a></li>
              <li id="t47><a href="#">T47</a></li>
              <li id="t495"><a href="#">T495</a></li>
              <li id="t535"><a href="#">T535</a></li>
              <li id="t535"><a href="#">T535</a></li>
              <li id="t575"><a href="#">T575</a></li>
              <li id="t575"><a href="#">T575</a></li>
            </ul>
            <div class="clearBoth"></div>
          </div>");

           });

谢谢

*UPDATE**

这似乎注入了HTML，但隐藏了li。导航栏第13页。。。

<script>
jQuery(document).ready(function($) {
        $("li.page-item-13 a").load("/wp-content/themes/mytheme/includes/mega-menu.html");
});
</script>

没有其他想法，我现在也将li的文本添加到megaMenu文件中。它现在似乎奏效了-虽然我不确定我对这个黑客程序是否百分之百满意。。。