Разрешить щелкать ссылку на раскрывающийся список начальной загрузки Twitter?

Мы настроили раскрывающийся список начальной загрузки Twitter, чтобы он работал при наведении (в отличие от нажатия кнопки [да, мы знаем, что на сенсорных устройствах нет наведения)). Но мы хотим, чтобы основная ссылка работала, когда мы щелкаем по ней.

По умолчанию Twitter начальной загрузки блокирует его, так как мы можем включить его снова?

Источник

8 ответов

Решение

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

<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>
Источник

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

Это все исправления HTML и CSS (использует два <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*/
}
Источник

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

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

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

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

Источник

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

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

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

Источник

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

Источник

Вы могли бы использовать фрагмент JavaScript

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

Это отвяжет событие click, предотвращая изменение URL.

Источник

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

/**
 * 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');
        }
    });
});
Источник

Это можно сделать проще, добавив две ссылки, одну с текстом и ссылкой, а другую с раскрывающимся списком и кареткой:

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

Источник
Другие вопросы по тегам