ここに見られるようなアコーディオンを自分のウェブサイトで作ろうとしています。ただし、アコーディオン ダウンする場所をクリックするたびに、ドロップせずに、代わりに my_url#collapseOne (または、クリックした場所に応じて 2 つまたは 3 つ) にリンクします。また、Web ページをロードすると、メニュー 1 は既にドロップされており (望ましくありません)、他の 2 つは正しく表示されます。
アコーディオン効果を適切に実装する方法についてのアイデアはありますか?
ここに見られるようなアコーディオンを自分のウェブサイトで作ろうとしています。ただし、アコーディオン ダウンする場所をクリックするたびに、ドロップせずに、代わりに my_url#collapseOne (または、クリックした場所に応じて 2 つまたは 3 つ) にリンクします。また、Web ページをロードすると、メニュー 1 は既にドロップされており (望ましくありません)、他の 2 つは正しく表示されます。
アコーディオン効果を適切に実装する方法についてのアイデアはありますか?
http://twitter.github.com/bootstrap/javascript.html#collapse。ブートストラップインストールをカスタマイズした場合は、必要なファイルがあることを確認してください。アセットパイプラインでtwitter-bootstrap-railsgemを使用している場合は、そのコードをドロップするだけで機能することを確認できます。
だからあなたがする必要がある2つのことがあります
ドキュメントの準備ができたら、アコーディオンを初期化する必要があります。つまり、すべてのアコーディオン コンテナーを調べて、閉じた状態で初期化します。
アコーディオンを開閉するリンクにクリック イベント ハンドラーを追加します。ブラウザーがこれらのリンクをたどらないようにするには、これらのイベント ハンドラーから false を返す必要があります。これにより、イベントがそれ以上発生するのを防ぐことができます。これにより、ブラウザはリンクをたどることができなくなります。