Foundation 5 顶部栏下拉项的自定义事件

Question

我在 Aurelia 网络应用程序中使用 Foundation 5 顶部栏下拉菜单。我想将单击事件处理程序添加到下拉菜单项。我的代码如下所示：

<!DOCTYPE html>
<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch g… webworkers applicationcache svg inlinesvg smil svgclippaths" style="">

<head>
    <meta charset="utf-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title></title>
    <script src="/Scripts/jquery-2.1.4.js"></script>
    <link rel="stylesheet" href="/Content/foundation/foundation.css"></link>
    <link rel="stylesheet" href="/Content/foundation/foundation.mvc.css"></link>
    <link rel="stylesheet" href="/Content/font-awesome.min.css"></link>
    <link rel="stylesheet" href="/Content/custom/app.css"></link>
    <script src="/Scripts/modernizr-2.8.3.js"></script>        
</head>
<body>
    <nav class="top-bar fixed" data-topbar role="navigation">
        ...

        <section class="top-bar-section">
            <ul class="left">
                <li class="has-dropdown">
                    <a href="#" title="${activeModule.Description}">
                        ${activeModule.DisplayName}
                    </a>
                    <ul class="dropdown">
                        <ul repeat.for="module of allModules">
                            <li>
                                <a click.delegate="$parent.setActiveModule(module.Name)" data-trash="${$parent.activeModule.Name}">
                                    <strong>${module.DisplayName} </strong> | <em> ${module.Description} </em>
                                </a>
                            </li>
                            <li class="divider">
                            </li>
                        </ul>
                    </ul>
                </li>
            </ul>

        </section>
    </nav>
    <div class="page-host row">
    ...
    </div>
    <hr />
    <footer>
        <p></p>
    </footer>

    <script src="/Scripts/foundation/fastclick.js"></script>
    <script src="/Scripts/foundation/foundation.js"></script>
    <script src="/Scripts/foundation/foundation.abide.js"></script>
    <script src="/Scripts/foundation/foundation.accordion.js"></script>
    <script src="/Scripts/foundation/foundation.alert.js"></script>
    <script src="/Scripts/foundation/foundation.clearing.js"></script>
    <script src="/Scripts/foundation/foundation.dropdown.js"></script>
    <script src="/Scripts/foundation/foundation.equalizer.js"></script>
    <script src="/Scripts/foundation/foundation.interchange.js"></script>
    <script src="/Scripts/foundation/foundation.joyride.js"></script>
    <script src="/Scripts/foundation/foundation.magellan.js"></script>
    <script src="/Scripts/foundation/foundation.offcanvas.js"></script>
    <script src="/Scripts/foundation/foundation.orbit.js"></script>
    <script src="/Scripts/foundation/foundation.reveal.js"></script>
    <script src="/Scripts/foundation/foundation.slider.js"></script>
    <script src="/Scripts/foundation/foundation.tab.js"></script>
    <script src="/Scripts/foundation/foundation.tooltip.js"></script>
    <script src="/Scripts/foundation/foundation.topbar.js"></script>
    <script>
        $(document).foundation();
    </script>

</body>
</html>

但是，每当我单击下拉项时，都不会调用自定义事件处理程序。我测试了同一段代码，将它放在 <li class="has-dropdown"> 之外并直接放在 <ul class="left"> 之下，我发现它可以正常工作。

任何人都可以让我知道我在这里缺少什么吗？

谢谢。

Answer 1

对于看到这个问题的任何人，以下是我解决它的方法：

我了解到对 $(document).foundation(); 的调用无法正常工作。当我使用 Aurelia 时，我利用视图的生命周期事件来解决这个问题。因此，我在 attached 事件中添加了对 $(document).foundation(); 的调用，如下所示：

attached() {
    $(document).foundation();
}

就是这样。希望对你有帮助。

Foundation 5 顶部栏下拉项的自定义事件

Custom event for Foundation 5 top bar dropdown items

javascript

css

zurb-foundation

zurb-foundation-5

aurelia