Bootstrap 3: как сделать ссылку для выпадающего меню нажатой в navbar

Я использую навигационную панель по умолчанию, а несколько элементов списка - выпадающие меню. Я не могу нажать ссылку, которая вызывает раскрывающийся список. Я знаю, что я мог бы просто добавить дублирующую ссылку в раскрывающийся список, но я бы предпочел. Можно ли сделать ссылку на ссылку кликаемой ссылкой (а не просто ручкой для выпадающего списка)?

Для справки см. первую ссылку в раскрывающемся списке ниже. Я хочу, чтобы пользователи могли щелкнуть по нему и на самом деле перейти на страницу, на которую он указывает.

<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>

Ответы

Ответ 1

Вот этот код, который скользит по подменю при наведении и позволяет перенаправить на страницу, если вы нажмете на нее.

Как: удалите class="dropdown-toggle" data-toggle="dropdown" из тега и добавьте css.

Ниже приведена демонстрация jsfiddle ( FYI: Для демонстрации настройте jsfiddle splitter для просмотра выпадающего списка из-за Bootstrap CSS. jsfiddle не позволит вам перенаправлять на новую страницу.).

enter image description here

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    <style type='text/css'>
        ul.nav li.dropdown:hover ul.dropdown-menu {
            display: block;
        }
    </style>
</head>
<body>
    <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 href="http://stackoverflow.com/">Qaru <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>
</body>
</html>

Ответ 2

Просто добавьте класс disabled на якорь:

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

И вы свободны.

Ответ 3

Вот небольшой взлом на основе Bootstrap 3.3, используя бит jQuery.

Щелчок по раскрывающемуся раскрывающему меню выполняет ссылку.

$('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');
        }
    }
});

Ответ 4

Я знаю, что это немного старо, но я недавно столкнулся с этим, ища аналогичное решение. Полагаться на события наведения не очень хорошо для отзывчивого дизайна и особенно ужасно на мобильных/сенсорных экранах. Я закончил делать небольшое редактирование в файле dropdown.js, чтобы вы могли щелкнуть элемент меню, чтобы открыть меню, и если вы снова нажмете элемент меню, он последует за ним.

Хорошая вещь об этом заключается в том, что он не полагается на зависание вообще, и поэтому он по-прежнему прекрасно работает на сенсорном экране.

Я разместил его здесь: https://github.com/mrhanlon/twbs-dropdown-doubletap/blob/master/js/dropdown-doubletap.js

Надеюсь, что это поможет!

Ответ 5

1: удалить dropdown-trigger:

data-toggle="dropdown"

2: добавьте этот css

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

опубликовал для людей, как наткнулся на это

Ответ 6

Не нужно использовать дополнение CSS/JS. (Испытано)

  • data-toggle="dropdown" - для Clickable (можно использовать Mobile и Web)
  • data-hover="dropdown" - для Hover (только для веб-сайтов. Cz mobile не имеет функции 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 just for snippet preview purpose </p>

Ответ 7

Добавьте отключенный класс в своем якоре, следующие 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'); }
});

Ответ 8

Любое прибывающее здесь, кто хочет быстро ответить на эту проблему. Замените функцию "Dropdown.prototype.toggle" в файле bootstrap.js(или dropdown.js) следующим образом:

  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
  }

Во втором клике (т.е. если в элементе меню есть класс "open" ), он сначала проверяет, есть ли href undefined или установлен на "javascript:;" перед тем, как отправить вас по своему весёлом пути.

Наслаждайтесь!

Ответ 9

Это позволяет использовать ссылку в меню верхнего уровня раскрывающегося списка, когда она открывается, и отключает ее при закрытии, при этом единственным недостатком, по-видимому, является "дважды" нажать выпадающее меню, чтобы закрыть его на мобильных устройствах.

$(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')
    });
});

Примечание, это предполагает "стандартную" разметку и Turbolinks (Rails). Вы можете попробовать с $(document).ready(...)

Ответ 10

Вот мое решение, которое использует JQuery в вашем заголовке и работает на Mobile.

На мобильном телефоне верхние ссылки требуют двух кранов: один для выпадающего меню и один для перехода к его ссылке.

$(function(){
  $('.dropdown-toggle').click(
    function(){
      if ($(this).next().is(':visible')) {
        location.href = $(this).attr('href');;
      }
     });
  });
});

Ответ 11

Я знаю его слишком поздно, но каждый, кто пришел сюда для помощи, теперь вы можете увидеть этот пост. Есть два варианта использования css/JavaScript, и если вы используете css, он будет применим к устройствам, размер которых превышает 769 пикселей для интерактивного верхнего меню, который будет отлично работать f

См. здесь для статьи

Ответ 12

Большинство из вышеперечисленных решений не являются мобильными.

Решение, которое я предлагаю, обнаруживает, если его не сенсорное устройство и что navbar-toggle (меню гамбургера) не видно, и делает пункт родительского меню раскрывать подменю при наведении и следовать его ссылка на клик

Также делает 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>

Ответ 13

Альтернативно здесь простое решение jQuery:

$('#menu-main > li > .dropdown-toggle').click(function () {
    window.location = $(this).attr('href');
});