Superfish sf-js-enabled не работает - PullRequest
Новая
       30

Superfish sf-js-enabled не работает

0 голосов
/ 02 октября 2019

Я пытался сделать выпадающее меню, используя Superfish. Тем не менее, выпадающий список не работает. Все скрипты и ссылки направлены в файл js / css. Я также сделал сценарий, необходимый для подготовки функции. Но это не похоже на работу. note Я делаю это на статическом 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>

Я надеюсь, что выпадающее меню будет работать. У него даже нет выпадающего списка.

Ответы [ 2 ]

0 голосов
/ 02 октября 2019

Вот пример рабочего примера. Ваш код тоже нуждается в некоторых изменениях 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>
0 голосов
/ 02 октября 2019

вам нужно убедиться, что готовый документ помещен после вашего html тела.

, если вы поместите его в начало тела, это не будет работать, потому что элемент dom еще не создан.

...