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

你能发布javascript文件和css如何加载到页面？也许路径取决于html文件的位置。

Answer 2

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

确保对所有脚本文件（查询，响应，头骨，工具等）执行此操作。

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

2 个答案: