Question

我有这个使用Foundation 4创建的下拉框。

<a href="#" data-dropdown="pipeline" class="small secondary radius button dropdown" >Select a Pipeline</a>
  <ul id="pipeline" data-dropdown-content class="f-dropdown ">
    <li>
      <a href="#" id="2d">2D Pipeline</a>
    </li>
    <li>
      <a href="#">3D Pipeline</a>
    </li>
  </ul>

我想要做的是当用户点击2D Pipeline时，它应显示div。这是我的剧本。文档加载时隐藏了div。

$(document).ready(function() {
  $("a[href*='teams_pipeline.html']").removeAttr("id");
  $("#2d_div").hide();
});
$("#pipeline li a#2d").click(function() {
   $("#2d_div").show();
});

此脚本目前无效

Answer 1

您删除了pageload上的id，尝试删除该位：

$("a[href*='teams_pipeline.html']").removeAttr("id");

从代码

它应该工作。也许隐藏你的CSS中的div，在这种情况下使用javascript似乎是不必要的，就像设置

＃2D-DIV { 显示：无 }

Answer 2

在click函数

中移动$(document).ready处理程序片段

$(document).ready(function () {
    $("a[href*='teams_pipeline.html']").removeAttr("id");
    $("#2d_div").hide();

    $("#pipeline li a#2d").click(function () {
        $("#2d_div").show();
    });
});

jsfiddle demo

还考虑先用CSS而不是jQuery

隐藏div

Show（）不能与<li>标签</li>一起使用

2 个答案: