68

ホバーで動作するようにTwitterブートストラップドロップダウンを設定しました（[はい、タッチデバイスにホバーがないことを認識しています]をクリックするのとは対照的です）。ただし、メインリンクをクリックしたときに機能するようにする必要があります。

デフォルトでは、twitterブートストラップはそれをブロックしますが、どうすればそれを再度有効にできますか？

4

8 に答える 8

122

アンカーにクラスとしてdisabledを追加するだけです。

<a class="dropdown-toggle disabled" href="http://google.com">
    Dropdown <b class="caret"></b></a>

だからすべて一緒に次のようなもの：

<ul class="nav">
    <li class="dropdown">
        <a class="dropdown-toggle disabled" href="http://google.com">
            Dropdown <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </li>
</ul>
于 2012-09-29T14:19:59.853 に答える
12

実際に機能する回答（選択した回答はドロップダウンを無効にする）、またはjavascriptを使用したオーバーライドはないため、ここに進みます。

これはすべてhtmlとcssの修正です（2つの<a>タグを使用）：

<ul class="nav">
 <li class="dropdown dropdown-li">
    <a class="dropdown-link" href="http://google.com">Dropdown</a>
    <a class="dropdown-caret dropdown-toggle"><b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
    </ul>
 </li>
</ul>

これが必要なCSSです。

.dropdown-li {
    display:inline-block !important;
}
.dropdown-link {
    display:inline-block !important; 
    padding-right:4px !important;
}
.dropdown-caret {
    display:inline-block !important; 
    padding-left:4px !important;
}

どちらかのホバーで両方の<a>タグを強調表示する場合は、ブートストラップもオーバーライドする必要があります。次のことを試してみてください。

.nav > li:hover {
    background-color: #f67a47; /*hover background color*/
}
.nav > li:hover > a {
    color: white; /*hover text color*/
}
.nav > li:hover > ul > a {
    color: black; /*dropdown item text color*/
}
于 2015-01-22T22:41:57.680 に答える
11

「サブメニューがドロップダウンしない」と不満を言っている人のために、私はそれをこのように解決しました。これは私にはきれいに見えます。

1）あなたのほかに

<a class="dropdown-toggle disabled" href="http://google.com">
     Dropdown <b class="caret"></b>
</a>

新しいを置く

<a class="dropdown-toggle"><b class="caret"></b></a>

タグを削除すると、次の<b class="caret"></b>ようになります。

<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown</a><a class="dropdown-toggle"><b class="caret"></b></a>

2）次のcssルールでスタイルを設定します。

.caret1 {
    position: absolute !important; top: 0; right: 0;
}

.dropdown-toggle.disabled {
    padding-right: 40px;
}

.caret1クラスのスタイルは、右隅の絶対に内側に配置するためのものliです。

2番目のスタイルは、ドロップダウンの右側にパディングを追加してカレットを配置し、メニュー項目のテキストが重ならないようにするためのものです。

これで、デスクトップバージョンとモバイルバージョンの両方で見栄えがよく、テキストをクリックするかキャレットをクリックするかに応じてクリックとドロップダウンの両方が可能な、優れたレスポンシブメニュー項目ができました。

于 2014-07-04T21:40:25.960 に答える
4

トップレベルのアンカー要素をクリック可能なアンカーにする問題についてはよくわかりませんが、デスクトップビューにホバー効果を持たせ、モバイルビューでクリック可能性を維持するための最も簡単なソリューションを次に示します。

// Medium screens and up only
@media only screen and (min-width: $screen-md-min) {
    // Enable menu hover for bootstrap
    // dropdown menus
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

このように、モバイルメニューは引き続き正常に動作しますが、デスクトップメニューはクリックではなくホバーで展開されます。

于 2016-01-28T21:31:06.993 に答える
2

別の解決策は、アンカーから「dropdown-toggle」クラスを削除することです。この後、クリックしてもdropwon.jsがトリガーされなくなるため、ホバー時にサブメニューを表示することをお勧めします。

于 2014-02-02T17:57:50.030 に答える
1

あなたはjavascriptスニピットを使うことができます

$(function()
{
    // Enable drop menu clicks
    $(".nav li > a").off();
});

これにより、クリックイベントのバインドが解除され、URLが変更されなくなります。

于 2016-08-29T08:38:49.427 に答える
0

画面の幅に応じて、データホバーからデータトグルに切り替わった小さなハックを次に示します。

/**
 * Bootstrap nav menu hack
 */
$(window).on('load', function () {
    // On page load
    if ($(window).width() < 768) {
        $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
    }

    // On window resize
    $(window).resize(function () {
        if ($(window).width() < 768) {
            $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
        } else {
            $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-toggle').attr('data-hover', 'dropdown');
        }
    });
});
于 2017-07-10T20:28:13.740 に答える
0

これは、2つのリンクを追加することで簡単に行うことができます。1つはテキストとhrefを使用し、もう1つはドロップダウンとキャレットを使用します。

<a href="{{route('posts.index')}}">Posts</a>
<a href="{{route('posts.index')}}" class="dropdown-toggle" data-toggle="dropdown" role="link" aria-haspopup="true" aria- expanded="false"></a>
<ul class="dropdown-menu navbar-inverse bg-inverse">
    <li><a href="{{route('posts.create')}}">Create</a></li>
</ul>

次に、ドロップダウンのカレットをクリックし、リンクをリンクとしてクリックします。cssやjsは必要ありません。Bootstrap 4 4.0.0-alpha.6を使用していますが、キャレットを定義する必要はありません。htmlなしで表示されます。

于 2018-04-25T15:52:23.933 に答える