Superfish sf-js-enabled 似乎不起作用

Question

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

我试图更改源文件名以检查它是否是源问题，但似乎不是，因为我仍然可以接受我的 main.css 而不是 superfish.css或 .js 文件。我也对比过其他一些使用superfish的网站，好像是一样的。

    <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>

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

Answer 1

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

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

Answer 2

这是一个工作示例您的代码也需要一些 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>

Superfish sf-js-enabled 似乎不起作用

Superfish sf-js-enabled seems to be not working

html

javascript

css

superfish