web-dev-qa-db-ja.com

Twitter bootstrapドロップダウントグルリンクのクリックを許可しますか？

Twitter bootstrapドロップダウンをホバーで動作するようにセットアップしました（[はい、タッチデバイスでホバーなしを認識しています]をクリックするのではなく）。ただし、クリックするとメインリンクが機能するようにしたいと考えています。

デフォルトでは、Twitter bootstrapはそれをブロックします。

drop-down-menuhyperlinktwitter-bootstrap
68
Hailwood

アンカーのクラスとして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>
121
David Spence

「サブメニューがドロップダウンしない」と文句を言う人のために、私はこのように解決しました。

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

これで、デスクトップ版とモバイル版の両方で見た目が良く、テキストまたはキャレットをクリックするかどうかに応じてクリックおよびドロップダウンできるニース応答メニュー項目ができました。

11
Pere

実際に機能する回答（選択された回答はドロップダウンを無効にする）や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*/
}
10
kingPuppy

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

// 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;
    }
}

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

4
Ken Prince

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

2
Chuntao Lu

JavaScriptスニペットを使用できます

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

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

1
Ian

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

<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なしで表示されます。

0
Jorn

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

/**
 * 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');
        }
    });
});
0
Allure Web Solutions