堆栈内存溢出
  繁体   English   中英

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

[英]Superfish sf-js-enabled seems to be not working

 原文  2019-10-02 03:34:07  5   2    javascript/ html/ css/ superfish

问题描述

我尝试使用 Superfish 做一个下拉菜单。 但是，下拉菜单似乎不起作用。 所有的脚本和链接都指向 js/css 文件。 我还完成了准备 function 所需的脚本。 但这似乎不起作用。 注意我在 static 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>

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

2 个解决方案

解决方案1
 0  2019-10-02 03:39:35

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

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

解决方案2
 0 已采纳  2019-10-02 04:18:28

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery（“ ul.sf-menu”）。superfish不是函数 TypeError：jQuery（…）.superfish不是函数。 ul.sf菜单 JavaScript冲突：联系表格7和superfish.js 尽管启用了实验性 js，但 ECMA 6 不起作用 JS：从URL获取文件名-JS似乎在后台进行工作？ 任何人都可以协助处理与 discord.js 相关的似乎不起作用的代码吗？ 为什么我的Superfish菜单在Firefox中无法正常运行？ Superfish菜单显示IE9中的结构已损坏，在Chrome中工作正常 AngularJS无法在我的SF2应用程序中工作 在 WebView 中启用 JS
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM