0

我使用 zepto js lib 编写了一个简单的手风琴。

如何防止点击空锚标签时页面跳转？

还寻找有关如何更好地改进这一点的建议。

HTML

<div class="box">
   <span class="learn-more"><a href="#">Learn more</a></span>
   <div class="more">
     blah<br>
     blah<br>
     blah<br>
     <span class="close"><a href="#">close</a></span>
   </div>
</div>
<div class="box">
   <span class="learn-more"><a href="#">Learn more</a></span>
   <div class="more">
     blah<br>
     blah<br>
     blah<br>
     <span class="close"><a href="#">close</a></span>
   </div>
</div>

​Javascript 

// hide content on page load
$('.more').addClass('hide');
// set variables
var learnMore = $('.learn-more'),
    close = $('.close');
// click on 'learn-more' shows content
learnMore.click(function() {
    $(this).hide().next('div').toggleClass('hide');
});
// hide content when user clicks on 'close' within content
close.click(function() {
    $(this).parent().toggleClass('hide');
    $(this).parent().prev().show();
});

​工作 演示

http://jsfiddle.net/s5x9A/

4

1 回答 1

1

在 jQuery 和 Zepto 中，您可以使用 event.preventDefault 来防止 '#' 页面跳转，如下所示：

$('a.your-link').click( function (event) {
    event.preventDefault();
});

return: false;一个区别是，在 Zepto 中，您不能像在 jQuery 中那样结束事件处理程序。

更多信息：Zepto.js 不返回 false？

于 2012-11-29T04:37:54.413 回答