Superfish sf-js-enabled 似乎无法正常工作答案

【问题标题】：Superfish sf-js-enabled seems to be not workingSuperfish sf-js-enabled 似乎无法正常工作
【发布时间】：2019-10-02 12:24:36
【问题描述】：

我尝试使用 Superfish 制作下拉菜单。但是，下拉菜单似乎不起作用。所有的脚本和链接都指向 js/css 文件。我还完成了准备功能所需的脚本。但这似乎不起作用。注意我在静态 html 上做这个。

我尝试更改源文件名以检查是否是源问题，但似乎不是，因为我仍然可以接收我的 main.css 但不能接收 superfish.css 或 .js 文件。我也和其他一些使用超级鱼的网站进行了比较，似乎是一样的。

    <link href="http://localhost:8383/1004Project/public_html/css/superfish.css" rel="stylesheet" media="screen">
    <script src="http://localhost:8383/1004Project/public_html/js/jquery.js"></script>
    <script src="http://localhost:8383/1004Project/public_html/js/superfish.js"></script>
    <script src="http://localhost:8383/1004Project/public_html/js/hoverIntent.js"></script>
    <script>
        jQuery(document).ready(function() {
          jQuery('ul.sf-menu').superfish();
        });
    </script>

<nav id="primary-menu">
                            <ul class="sf-js-enabled">
                                <li><a href="ProjectStories.html"><div>Project's Stories</div></a></li>
                                <li><a href="Menus.html"><div>Menus</div></a></li>
                                <li><a href="Promotions.html"><div>Promotions</div></a></li>
                                <li><a href="CelebrationTips.html"><div>Celebration Tips</div></a></li>
                                <li class="sub-menu">
                                    <a href="#" class="sf-with-ul">
                                        <div>Help</div>
                                    </a>
                                    <ul style="display: none;">
                                        <li>
                                            <a href="FAQ.html"><div>FAQ</div></a>
                                        </li>
                                        <li>
                                            <a href="Feedback.html"><div>Feedback</div></a>
                                        </li>
                                        <li>
                                            <a href="ContactUs.html"><div>Contact Us</div></a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </nav>

我希望下拉菜单能够正常工作。它甚至没有下拉菜单。

【问题讨论】：

标签： javascript html css superfish

【解决方案1】：

这是一个工作示例您的代码也需要一些 css 更改，所以我参考了一些基本示例 here 还要确保所有脚本都正确加载，并且您在浏览器控制台中也没有关于脚本的任何错误。

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/css/superfish.min.css" media="screen">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/js/superfish.min.js">
    </script>
</head>
<div id="sample1" class="clearfix">
    <ul id="sample-menu-1" class="sf-menu sf-js-enabled sf-arrows" style="touch-action: pan-y;">
        <li class="current"><a href="#a" class="sf-with-ul">menu item</a>
            <ul style="display: none;">
                <li><a href="#aa">menu item</a></li>
                <li class="current"><a href="#ab" class="sf-with-ul">menu item</a>
                    <ul style="display: none;">
                        <li class="current"><a href="#">menu item</a></li>
                        <li><a href="#aba">menu item</a></li>
                        <li><a href="#abb">menu item</a></li>
                        <li><a href="#abc">menu item</a></li>
                        <li><a href="#abd">menu item</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sf-with-ul">menu item</a>
                    <ul style="display: none;">
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sf-with-ul">menu item</a>
                    <ul style="display: none;">
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">menu item</a></li>
        <li><a href="#" class="sf-with-ul">menu item</a>
            <ul style="display: none;">
                <li><a href="#" class="sf-with-ul">menu item</a>
                    <ul style="display: none;">
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sf-with-ul">menu item</a>
                    <ul style="display: none;">
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sf-with-ul">menu item</a>
                    <ul style="display: none;">
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sf-with-ul">menu item</a>
                    <ul style="display: none;">
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sf-with-ul">menu item</a>
                    <ul style="display: none;">
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                        <li><a href="#">menu item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">menu item</a></li>
    </ul>
</div>
<script>
    jQuery(document).ready(function () {
        $('ul.sf-menu').superfish();
    });
</script>

【讨论】：

嗨！谢谢您的帮助！我意识到我的错误是我没有在我的 ul 中放入 sf-menu。但是，只有在我使用您的链接和脚本时才能做到这一点。你知道如何改变背景颜色吗？但是感谢您的帮助！
要更改背景颜色，您需要覆盖这些类 .sf-menu ul li { background: #86c182; } .sf-menu li { 背景：#5679da; } 您可以通过在浏览器中检查它们轻松找到它们。
如果它只使用我分享的链接和脚本，那么你没有使用正确的资源路径
我将这些 css 和 js 文件放在与我的 main.css 文件 main.js 文件相同的文件中。我可以访问那些，我放置了相同的文件路径，所以它应该可以正常工作吗？我不确定。因为我对 html 还很陌生。注意到背景变化，会这样做。我真的不喜欢我的帮助旁边的箭头。
您是如何运行您的页面/应用程序的，您是否使用任何服务器

【解决方案2】：

您需要确保准备好的文档放在您的 html 正文之后。

如果你放在 body 的顶部，它不会起作用，因为 dom 元素还没有创建。

【讨论】：

我已尝试将其放入体内。但是，它仍然不起作用。