0

我有一个改良的 Foundation 4 手风琴。我调整它的原因是我可以在我的部分标题中设置一个行/列,并在其中挤入一个额外的列。

所以代替这个:

<p class="title" data-section-title><a href="#">Section 1</a></p>

我有这样的事情:

<div class="row">
  <div class="large-10 columns">
    <p class="title" data-section-title><a href="#">Modified HTML (uses div.row)</a></p>
  </div>
  <div class="large-2 columns">
      <p>extra column</p>
  </div>
</div> 

我的问题:没有阻止点击事件。

下面是演示:(我添加了向下滚动以演示单击 a-tag 跳回顶部。)

http://jsfiddle.net/pickledegg/nbJyu/4/

在正常情况下阻止点击的 javascript 在foundation.section.js 中。对于我的示例,它合并到了foundation.min,所以这里是实际的未缩小代码:

https://gist.github.com/pickledegg/5797197

4

1 回答 1

2

似乎是因为在javascript中

content = $this.siblings(self.settings.content_selector),

 if (!settings.deep_linking && content.length > 0) {
e.preventDefault();
}

上面的代码会阻止正常的点击行为。但是,在您修改后的代码中,您在 p 周围添加了 2 个带有 title 类的容器。为了使代码防止链接跟随,具有标题类的 p 和具有内容类的 div 必须是同级的。因此,我可能只是在此处将修改后的 id 添加到 html 中:

p class="title" id="modified" data-section-title=""><a href="#">Modified HTML (uses div.row)</a></p>

和javascript:

    $('#modified').click(function(event) {
event.preventDefault();
       });

为我工作:)

于 2013-06-17T14:58:58.787 回答