72

デフォルトのナビゲーション バーを使用しており、いくつかのリスト項目はドロップダウンです。ドロップダウンをトリガーするリンクをクリックできません。重複したリンクをドロップダウンに追加できることはわかっていますが、そうではありません。ヘッド リンクをクリック可能なリンク (ドロップダウンのハンドルだけでなく) にすることは可能ですか?

参考までに、下のドロップダウンの最初のリンクを参照してください。ユーザーがそれをクリックして、実際にそれが指すページに移動できるようにしたい.

<nav class="navbar navbar-fixed-top admin-menu" role="navigation">
  <div class="navbar-header">...</div>
   <!-- Collect the nav links, forms, and other content for toggling -->
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     <ul class="nav navbar-nav navbar-right">
       <li class="dropdown">
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
           I DONT WORK! <b class="caret"></b>
         </a>
         <ul class="dropdown-menu">
           <li><a href="/page2">Page2</a></li>
         </ul>
       </li>
       <li><a href="#">I DO WORK</a></li>
     </ul>               
   </div><!-- /.navbar-collapse -->
 </nav>
4

16 に答える 16

54

disabledアンカーにクラスを追加するだけです:

<a class="dropdown-toggle disabled" href="{your link}">
Dropdown</a>

そして、あなたは自由に行くことができます。

于 2015-09-20T07:22:23.627 に答える
18

これは、少し jQuery を使用した Bootstrap 3.3 に基づく小さなハックです。

開いているドロップダウン メニューをクリックすると、リンクが実行されます。

$('li.dropdown').on('click', function() {
    var $el = $(this);
    if ($el.hasClass('open')) {
        var $a = $el.children('a.dropdown-toggle');
        if ($a.length && $a.attr('href')) {
            location.href = $a.attr('href');
        }
    }
});
于 2015-04-14T17:37:44.820 に答える
18

1: ドロップダウン トリガーを削除します。

data-toggle="dropdown"

2：これをあなたのcssに追加してください

.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu {
    margin-top: 0px;
}

これにどのようにつまずいたかの人々のために投稿されました

于 2014-02-16T01:44:49.807 に答える
5

CSS/JSの追加使用不要（動作確認済み）

  1. data-toggle="dropdown"-クリック可能 (モバイルとウェブを使用可能)
  2. data-hover="dropdown" -ホバー用(モバイルには機能がないため、ウェブのみHOVER)

モバイルでも問題なく動作します:)

Clickable( data-toggle="dropdown")のコード例

/*!
 * this CSS code just  for snippet preview purpose. Please omit when using  it. 
 */

#bs-example-navbar-collapse-1 ul li {
  float: left;
}

#bs-example-navbar-collapse-1 ul li ul li {
  float: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li>
      <a class="" href="">Home</a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                subnav1
            </a>
      <ul class="dropdown-menu">
        <li><a href="">Sub1</a></li>
        <li><a href="">Sub2</a></li>
        <li><a href="">Sub3</a></li>
        <li><a href="">Sub4</a></li>
        <li><a href="">Sub5</a></li>
        <li><a href="">Sub6</a></li>
      </ul>
      <div class="clear"></div>
    </li>
    <li class="dropdown">
      <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
            subnav2
            </a>
      <ul class="dropdown-menu">
        <li><a href="">Sub1</a></li>
        <li><a href="">Sub2</a></li>
        <li><a href="">Sub3</a></li>
        <li><a href="">Sub4</a></li>
        <li><a href="">Sub5</a></li>
        <li><a href="">Sub6</a></li>
      </ul>
      <div class="clear"></div>
    </li>
  </ul>
</div>

<br>
<br>
<p><b>Please Note:</b> added css code not related to Bootstrap navigation. It's just for snippet preview purpose </p>

出力

出力 ここに画像の説明を入力

于 2016-11-11T17:01:52.863 に答える
3

アンカーに無効なクラスを追加します。以下は js です。

$('.navbar .dropdown-toggle').hover(function() {
  $(this).addClass('disabled');
});

ただし、これはモバイル フレンドリーではないため、モバイル用に無効なクラスを削除する必要があるため、更新された js コードは次のとおりです。

$('.navbar .dropdown-toggle').hover(function() {
  if (document.documentElement.clientWidth > 769) { $(this).addClass('disabled');}
  else { $(this).removeClass('disabled'); }
});
于 2016-09-27T09:36:36.723 に答える
1

この問題に対する迅速な回答を求めている人は誰でもここに到着します。bootstrap.js (または dropdown.js) の "Dropdown.prototype.toggle" 関数を次のように置き換えます。

  Dropdown.prototype.toggle = function (e) {
var $this = $(this)

if ($this.is('.disabled, :disabled')) return

var $parent  = getParent($this)
var isActive = $parent.hasClass('open')

clearMenus()

if (!isActive) {
    if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
        // if mobile we use a backdrop because click events don't delegate
        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
    }

    var relatedTarget = { relatedTarget: this }
    $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))

    if (e.isDefaultPrevented()) return

    $parent
      .toggleClass('open')
      .trigger('shown.bs.dropdown', relatedTarget)

    $this.focus()
}
else
{
    var href = $this.attr("href").trim();

    if (href != undefined && href != " javascript:;")
        window.location.href = href;
}

return false
  }

2 回目のクリック (つまり、メニュー項目に「open」クラスがある場合) では、最初に href が未定義であるか、「javascript:;」に設定されているかどうかがチェックされます。あなたを楽しい道に送り出す前に。

楽しみ！

于 2014-12-03T15:47:49.327 に答える
1

これにより、ドロップダウンを開くとトップレベル メニューのリンクが有効になり、閉じると無効になります。モバイル デバイスでドロップダウンを閉じるには、ドロップダウンの外で 2 回タップする必要があるようです。

$(document).on("page:load", function(){
    $('body').on('show.bs.dropdown', function (e) {
        $(e.relatedTarget).addClass('disabled')
    });
    $('body').on('hide.bs.dropdown', function (e) {
        $(e.relatedTarget).removeClass('disabled')
    });
});

これは、「標準」マークアップとターボリンク (Rails) を想定していることに注意してください。$(document).ready(...) で試すことができます

于 2014-12-11T21:52:25.900 に答える
0

上記のソリューションのほとんどは、モバイル フレンドリーではありません。

私が提案している解決策は、タッチデバイスではなく、navbar-toggle（ハンバーガーメニュー）が表示されていないことを検出し、ホバー時にサブメニューを表示する親メニュー項目を作成し、クリック時にそのリンクをたどります

一部のブラウザーでは、ナビゲーション バーとメニューの間のギャップにより、サブアイテムにカーソルを合わせることができないため、tne margin-top 0 も作成します。

$(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); 
      });			
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

$(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

于 2017-03-13T09:55:12.087 に答える
0

これは私の場合に機能しました：

$('a[data-toggle="dropdown"]').on('click', function() {

    var $el = $(this);

    if ( $el.is(':hover') ) {

        if ( $el.length && $el.attr('href') ) {
            location.href =$el.attr('href');
        }

    }

});
于 2018-02-06T19:06:32.563 に答える