Question

我的导航栏上的几乎所有链接都是下拉列表。我希望它们出现悬停在大屏幕上，但点击更小的屏幕。那可能吗？在我寻找答案时，我遇到了这个问题：Bootstrap Menu: Dropdown on Hover for Desktop Only。这对我不起作用，因为我不希望整个下拉列表在移动设备上不可见;我只希望点击而不是悬停时可见。

Answer 1

<强> EDITED 来自@ ouwen-huang的答案很好，但由于jQuery是bootstrap.js的依赖项，你可以通过将所有要附加的事件添加到以空格分隔的引号中来实现jQuery方式： / p>

$('.dropdown').on('mouseenter mouseleave click tap', function() {
  $(this).toggleClass("open");
});

选择器基于标准的Bootstrap标记，直接从文档中获取，如下所示：

<li class="dropdown">
    <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
    </ul>
</li>

这里的要点是，如果您使用的是支持鼠标的设备（如没有触控功能的桌面），则会触发mouseenter / mouseleave事件，并且无需单击即可激活菜单。如果用户不在触发mouseenter / mouseleave事件的设备上，则当用户点击链接并且点击或点击处理程序处理下拉切换时，会触发点击或点击事件。

为了准确而编辑。

Answer 2

其他两种解决方案有效，但不保留引导样式。一个更简单的解决方案是只需添加“打开”即可。类。

$('.dropdown').on('mouseenter mouseleave click tap', function() {
  $(this).toggleClass("open");
});

Answer 3

您可以使用javascript事件。

使用移动支票库，您可以说

var domObject = document.querySelector('.myClassOrIDWhateverFloatsYourBoat');
if(mobile checked is true){
    domObject.addEventListener('hover', function(){
        $('.dropdown-toggle').dropdown();  // http://getbootstrap.com/javascript/
    })
}else{
   domObject.addEventListener('click', function(){
        $('.dropdown-toggle').dropdown();  // http://getbootstrap.com/javascript/
    })
}

Answer 4

尝试在stackoverflow上发布许多插件和解决方案后，我想出了相当简单的代码：

显示本机Bootstrap类的悬停下拉列表（因此它与按钮点击配合良好）
设置href时按钮链接正常工作
保持移动设备上的原始行为

简易版

$('ul.nav li.dropdown').hover(function() {
    if (!$('.navbar-toggle').is(':visible')) {
        $(this).toggleClass('open', true);
    }
}, function() {
    if (!$('.navbar-toggle').is(':visible')) {
        $(this).toggleClass('open', false);
    }
});
$('ul.nav li.dropdown a').click(function(){
    if (!$('.navbar-toggle').is(':visible') && $(this).attr('href') != '#') {
        $(this).toggleClass('open', false);
        window.location = $(this).attr('href')
    }
});

$('.navbar-toggle').is(':visible')检查我们目前是否处于移动设备视图中， $(this).toggleClass('open', true)添加或删除bootstrap使用的open css类，并且window.location = $(this).attr('href')将用户发送到链接href。

中设置的位置

要添加jQuery转换，我们必须稍微修改一下脚本。

修改后的版本

visible = false;

function toggleDropdown(dropdown, delay, fade, state) {
    if (state === undefined) visible = !visible
    else visible = state

    dropdown.children('.dropdown-menu').stop(true, true).delay(delay)[visible ? 'fadeIn' : 'fadeOut'](fade, function() {
        dropdown.toggleClass('open', visible);
        dropdown.children('.dropdown-toggle').attr('aria-expanded', visible);
        $(this).css('display', '');
    });
}

$('ul.nav li.dropdown').hover(function() {
    if ($('.navbar-toggle').is(':visible')) return;
    toggleDropdown($(this), 50, 100, true)
}, function() {
    if ($('.navbar-toggle').is(':visible')) return;
    toggleDropdown($(this), 400, 200, false)
});

$('ul.nav li.dropdown a').click(function(){
    if ($('.navbar-toggle').is(':visible')) return;
    if ($(this).attr('href') != '#') {
        toggleDropdown($(this).parent(), 50, 100, false)
        window.location = $(this).attr('href')
    }
    else {
        toggleDropdown($(this).parent(), 50, 100)
    }
});

visible变量使得在动画运行时重新悬停时一切正常。

Answer 5

// toggle dropdown on mouse hover, click and tap events
$('.dropdown').on('mouseenter mouseleave click tap touchstart', function(event) {
    if (!$('.navbar-toggle').is(':visible')) {
        $(this).dropdown('toggle');
    }
});

以下是基于Bootstrap 3 documentation for Javascript Dropdowns.的@ jme11＆＃39;答案的略微修改版本使用此方法的优点是它使下拉功能完全按照预期运行，而无需修改任何类因此是更清洁的IMO。

Codepen Example

Answer 6

实现此目的的一个好方法是仅在菜单未折叠时启用悬停。

$db = Db::getConnection(); // Connect to database
$field = $_POST['field'];

$result = $db->query("
SELECT id
     , name
     , tel
     , role
     , friend
     , date_reg
     , date_log
     , referral
     , balance
     , all_cash
     , timer
     , ip
     , status 
  FROM users 
 WHERE role = 'user' 
 ORDER 
    BY" . $field . " DESC
");

Answer 7

这很简单并且运行良好，但在移动设备上，如果您打开子菜单并单击要关闭的菜单项，则不会关闭

$('.dropdown').on('mouseenter mouseleave click tap', function() {
  $(this).toggleClass("open");
});

Answer 8

对于Bootstrap 4，以下代码可以正常工作。

$('.dropdown').on('mouseenter mouseleave click tap', function() {
    $(this).toggleClass("show");
});

Bootstrap 3下拉：在悬停和点击时

8 个答案: