私は、すべてのページにタスク中心のヘルプを備えた、段階的に強化されたBootstrap ed Web アプリケーションを構築しています。ヘルプ領域の div ( ) は非表示の状態で読み込まれます。通常、ユーザーが「ヘルプ」ボタン ( ) をクリックすると、メイン コンテンツ div が span12 から span9 に凝縮され、ヘルプ領域が span3 として表示されます。これはうまくいきます。id="help_area"a id="nav_help_button"
モバイルとタブレットをサポートしたいので、Bootstrap のレスポンシブ スキャフォールディングを使用しています。そのため、狭いビューポートでページを表示している場合、ヘルプ ボタンをクリックすると、ページの下部にある非表示のヘルプ エリアが「表示」されます‡。.slideToggle()jQuery ののコールバック メソッドを使用して JavaScript () を実行しようとしていますwindow.location.hash = "help_area";が、ヘルプ領域が表示された後に「ジャンプ」しますが、ジャンプしてもうまくいきません (エラーにはなりません。ブラウザが動かないだけです)。ヘルプ領域にフォーカスします)。
ページの下部にある div を表示して、そこにジャンプするにはどうすればよいですか? また、ターゲットが明らかになる前にブラウザーが内部リンクにジャンプしないように、preventDefault も使用しています。それは紛争でしょうか？
関連する ECMA スクリプトは次のとおりです。
$('#nav_help_button').click(function(event) {
"use strict"; //let's avoid tom-foolery in this function
event.preventDefault(); //don't let a tag try to jump us to #help_area before we reveal it
//adjust spans of main block and help area, set aria-hidden attribute on help block to help screen-readers
if ( $('#help_area').attr('aria-hidden')==='true' ) {
$('#content_container.span12').switchClass('span12', 'span9', 300);
$('#help_area').delay(300).slideToggle(300, function() { window.location.hash = "help_area"; }).attr('aria-hidden', 'false');
}
else {
$('#help_area').slideToggle(300).attr('aria-hidden', 'true');
$('#content_container.span9').delay(300).switchClass('span9', 'span12', 300);
}
});
問題を説明する JSFiddleもセットアップしました。複製するには
- http://fiddle.jshell.net/jhfrench/HdCbu/7/showを開く
- 次に、「PTO、AIT Life、Hours Worked」などが互いに積み重なるまで、そのブラウザウィンドウのサイズを変更します
- 右上隅のボタン (3 つの白い水平バーがあるボタン) をクリックして、ナビゲーション メニューを表示します。
- 青い「ヘルプ」ボタンをクリックして、表示/ジャンプ先を実行します。
‡ 一番右の div として、その左側のすべてが上に積み上げられるため、新しく「表示された」ヘルプ領域は通常、ページの表示部分の下にあります。
関連している：