1

私は全くの初心者ですので、ご容赦ください。私はここで私の質問に関連していると思う多くの投稿を読みましたが、提供された解決策を理解するのに苦労しています。

CSSだけでクリック時の水平アコーディオンを作成しようとしています。Firefoxでは問題なく動作します。この問題はChromeとSafariで発生します。

問題は、リンクがクリックされるたびに、ページがページのほぼ下部までスクロールダウンすることです。コンテンツ全体を表示するには、ページを上にスクロールする必要があります。リンクは次のようになります。

 <h2><a href="#accordion1">title1</a></h2>

言うまでもなく、これはユーザーにとって非常に煩わしいものになる可能性があります。JavaScriptを使用してこれを回避できることをどこかで読んだことがありますpreventDefault()。どうすればいいですか？これを防ぐ他の方法は何ですか？

4

1 に答える 1

0

編集 - preventDefault() はすべてのデフォルトの動作をキャンセルするようです (実際には意味があります) - 私が提示した最初の解決策は、まったく解決策ではないことが判明しました。

したがって、これは実際には非常に難しいことがわかります。

いくつかの検索の後、リンクのデフォルトの動作をキャンセルせずにスクロールをキャンセルすることはできないという結論に達しました（したがって、 のデフォルト.preventDefault()）。

あなたができることは、リンクのスクロールが完了した後にスクロールして元の場所に戻ることですが、できるだけ早くスクロールしたとしても、ブラウザでスクロールが起こっているのを見ることができるので、見苦しいです.解決。（とにかくここで見ることができます - http://jsfiddle.net/joplomacedo/RpDyc/）。

それで、代替品は？あなたがやっているように（ここでは:target疑似クラスを使用していると仮定します）、まだjavascriptが必要なので、:targetのものを忘れて、javascriptだけに頼ってください。それはよりシンプルで、よりクリーンで、「ハッキー」ではありません。

これが私がそれを行う方法です（jquery）-> http://jsfiddle.net/joplomacedo/AfzJY/

ただし、CSS を使用することを主張する場合は、Chris Coyier がここで提案しているように、:target ではなく :checked を利用することをお勧めします。彼の記事はかなりうまくいっているので、ここではこれ以上説明しません。

編集前

jqueryを使っていますか？もしそうなら、必要なのはこれだけです：

$('a[href="#accordion1"]').on('click', function (e) {
   e.preventDefault();
});

jquery を使用していない場合は、純粋な JavaScript で行う方法を次に示します。

var cancels_links = document.getElementsByClassName('cancels-link');

var cancel = function cancel(e) {
    e.preventDefault();
};

for (var i = 0, max = cancels_links.length; i < max; i++) {
    cancels_links[i].addEventListener('click', cancel, false );
}

class="cancels-link"...これは、キャンセルしたいデフォルトの動作である各「a」要素に追加する必要があります。

これが2つのソリューションのフィドルです-> http://jsfiddle.net/cBQnv/3/

于 2012-06-30T23:18:52.073 に答える