基础 5：从顶部栏下拉锚点调用 js 函数

Question

也许我在这里很愚蠢，但我不知道如何使用 javascript 函数响应 Foundation 5 TopBar 下拉菜单 selection。我想 select 我使用的图书馆的主题。要设置主题我需要调用一个js函数。

我有的是：

<div class="fixed">
<nav class="top-bar" data-topbar role="navigation">
    <section class="top-bar-section">
        <!-- Right Nav Section -->
    <ul class="right">
        <li class="has-dropdown">
            <a href="#">Theme</a>
            <ul class="dropdown" id="theme-dropdown">
                <li><a href="#">Light</a></li>
                <li><a href="#">Dark</a></li>
            </ul>
        </li>
    </ul>
    </section>
</nav>
</div>

这些当然包含在顶部栏 <nav> 等中，顶部栏上的下拉菜单在基本 HTML 模式下效果很好。

我遇到的问题是如何让 2 个 <li><a> 元素（浅色和深色主题）在单击时调用我的 JavaScript 函数 setTheme(themeName)？

我似乎找不到任何有人想从顶部栏而不是 URL 调用 js 的示例。

Answer 1

您似乎没有使用 JavaScript 框架？如果是，您应该研究该框架如何帮助您处理事件。否则，这里有一些想法：

1. onclick属性

只要您的 setTheme 函数是全局定义的，您就可以从列表项的 onclick 属性中调用它。

var span = document.querySelector('span');
function setTheme (themeName) {
  span.innerText = themeName;
}

<li onclick="setTheme('light')">Light</li>
<li onclick="setTheme('dark')">Dark</li>

Selected theme: <span>none</span>

2。 addEventListener方法

如果您的函数 setTheme 不是全局函数，请在函数范围内使用您的首选方法定位元素，并使用 addEventListener 将事件处理程序附加到 'click' 事件。

var listElems = document.querySelectorAll('li');
[].forEach.call(listElems, function (elem) {
  elem.addEventListener('click', function () {
    console.log("HI");
    setTheme(this.dataset.value);
  });
});

var span = document.querySelector('span');
function setTheme (themeName) {
  span.innerText = themeName;
}

<li data-value="light">Light</li>
<li data-value="dark">Dark</li>

Selected theme: <span>none</span>

Answer 2

这对我来说是一个愚蠢的错误，因为我没有用这个初始化 Foundation JS...

<script>
    $(document).foundation();
</script>

一旦我这样做了，@sdgluck 给出的解决方案就很成功。

基础 5：从顶部栏下拉锚点调用 js 函数

Foundation 5: call js function from topbar dropdown anchor

javascript

html

zurb-foundation

zurb-foundation-5