2

より正確に...

Bootstrapを使用して、サブメニュー項目（フィドル）を含むナビゲーションメニューがあります。

ただし、モバイルビューポートでは...少しだけ...です。リンクが多すぎます。

私は2つのことを達成できるようになりたいです：

  1. サブナビゲーションアイテムを非表示にして...
  2. トップレベルのアイテムをクリック可能にします（hrefはページに解決されます）

私はブートストラップサイトを探し回っていますが、これについては何も見つかりません。

ネイティブブートストラップを使用することは可能ですか？

スクリプトが必要な場合は、いくつかの「ポインタ」を提供してください。

ありがとう！

4

1 に答える 1

1

モバイルでサブメニュー項目を展開できるようにしたいですか? もしそうなら、トップレベルのリンクを直接の URL にすることはおそらく非現実的です。
そのシナリオのためのいくつかの「ポインタ」（すでにBootstrapプラグインと統合されているjQueryを使用）：

$('.nav .dropdown-menu').hide();  
$('.nav .dropdown-toggle').on('click', function() {
  $('.nav .dropdown-menu').toggle();
});


または、モバイルでトップレベルのリンクのみを表示 したい場合は、リンク ターゲットをカスタム data- 属性に保存し、href 値を動的に変更することができます。

$('.nav .dropdown-menu').hide();
$('.nav .caret').hide();
$('.nav .dropdown-toggle').each(function() {
  $(this).attr('href', $(this).data('name'));
});

各リンクに「data-name」属性を追加します。

<a href="#" data-name="page.php">Page</a>

幸運を！

于 2012-09-24T17:12:32.523 に答える