Разрешить нажимать ссылку на выпадающее меню twitter bootstrap?

Ответ 1

Просто добавьте отключенный как класс на якоре:

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

Ответ 2

Для тех из вас, кто жалуется, что "подменю не выпадают", я решил это так, что выглядит чисто для меня:

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 в правом углу.

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

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

Ответ 3

Так как на самом деле нет ответа, который работает (выбранный ответ отключает выпадающий список) или переопределяет его с помощью javascript.

Это все html и css fix (использует два тега <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*/
}

Ответ 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;
    }
}

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

Ответ 5

Альтернативное решение - это просто удалить класс "dropdown-toggle" из привязки. После этого нажатия больше не будет запускаться dropwon.js, поэтому вы можете захотеть, чтобы подменю отображалось при наведении.

Ответ 6

Вы можете использовать javascript snippit

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

Это приведет к отмене события клика, предотвращающего изменение URL.

Ответ 7

Здесь немного взлома, который переключается с привязки данных к переключению данных в зависимости от ширины экрана:

/**
 * 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');
        }
    });
});