javascript - 当 page.html 位于另一个文件夹中时，幻灯片菜单停止工作

Question

所以我有这个侧边菜单，点击后会展开。它在我的 index.html 页面和根文件夹中的所有其他页面中工作正常。

但是如果我打开文件夹内的页面 - 例如 ../blog/page.html 然后侧边菜单不起作用，你可以点击它但它不会滑出。该页面使用相同的 CSS 和 JS 工作表。

我错过了什么？

代码示例如下。

HTML:

<!-- Menu -->
                <section id="menu">

                    <!-- Search -->
                        <section>
                            <form class="search" method="get" action="#">
                                <input type="text" name="query" placeholder="Search" />
                            </form>
                        </section>

                    <!-- Links -->
                        <section>
                            <ul class="links">
                                <li>
                                    <a href="#">
                                        <h3>Lorem ipsum</h3>
                                        <p>Feugiat tempus veroeros dolor</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <h3>Dolor sit amet</h3>
                                        <p>Sed vitae justo condimentum</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <h3>Feugiat veroeros</h3>
                                        <p>Phasellus sed ultricies mi congue</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <h3>Etiam sed consequat</h3>
                                        <p>Porta lectus amet ultricies</p>
                                    </a>
                                </li>
                            </ul>
                        </section>

                    <!-- Actions -->
                        <section>
                            <ul class="actions vertical">
                                <li><a href="#" class="button big fit">Log In</a></li>
                            </ul>
                        </section>

                </section>

JS:

        // Menu.
        $menu
            .appendTo($body)
            .panel({
                delay: 500,
                hideOnClick: true,
                hideOnSwipe: true,
                resetScroll: true,
                resetForms: true,
                side: 'right',
                target: $body,
                visibleClass: 'is-menu-visible'
            });

    // Search (header).
        var $search = $('#search'),
            $search_input = $search.find('input');

        $body
            .on('click', '[href="#search"]', function(event) {

                event.preventDefault();

                // Not visible?
                    if (!$search.hasClass('visible')) {

                        // Reset form.
                            $search[0].reset();

                        // Show.
                            $search.addClass('visible');

                        // Focus input.
                            $search_input.focus();

                    }

            });

        $search_input
            .on('keydown', function(event) {

                if (event.keyCode == 27)
                    $search_input.blur();

            })
            .on('blur', function() {
                window.setTimeout(function() {
                    $search.removeClass('visible');
                }, 100);
            });

CSS:

                        #header .main ul li > a:before {
                        display: block;
                        height: inherit;
                        left: 0;
                        line-height: inherit;
                        position: absolute;
                        text-align: center;
                        text-indent: 0;
                        top: 0;
                        width: inherit;
                    }

Answer 1

正如 Alex 所说，您需要在每个 html 文件中设置正确的路径。例如，在 blog/page.html 中，您的脚本路径为:***../**assets/js/whatever-your-script-is.js*

确保对所有脚本文件(查询、响应、skull、util 等)执行此操作。