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;1 つの違いは、Zeptoでは、jQueryのようにイベント ハンドラーを終了できないことです。

詳細: Zepto.js は false を返しませんか?

于 2012-11-29T04:37:54.413 に答える