JQuery点击事件不隐藏svg

Question

我正在尝试获得一个隐藏/显示和 svg 元素的工作导航栏。然而，JQuery 无法正确响应。我的代码如下:

HTML

<header id="header"><h1 class="title">Test</h1></header>
<nav id="nav">
    <p class="text" data-index="0">Test</p>
    <p class="text" data-index="1">Test</p>
    <p class="text" data-index="2">Test</p>
    <p class="text" data-index="3">Test</p>
    <p class="text" data-index="4">Test</p>
</nav>
<div id="main" class="center">
    <svg width="1000" height="200" id="timeline">
        <line x1="0" y1="200"
              x2="1000" y2="200"
              stroke="black"
              stroke-width="4"/>
    </svg>
</div>

JavaScript

$(".text").click(function(event) {
    var index = $(event.target).data("index");
    switch(index) {
        case "0":
            $("#timeline").hide("slow");
            break;
        case "1":
            $("#timeline").show("slow");
            break;
    }
});

这是一个 JSFiddle 演示了一个完整的示例:https://jsfiddle.net/James_Parsons/s0gze1qq/1/

Answer 1

索引是数字，而不是字符串，因此您应该使用:

Updated Example - _{(作为旁注，您没有包含 jQuery)}

$(".text").click(function(event) {
    var index = $(event.target).data("index");
    switch(index) {
        case 0:
            $("#timeline").hide("slow");
            break;
        case 1:
            $("#timeline").show("slow");
            break;
    }
});