Question

我有Bootstrap下拉菜单。在桌面版本上，我希望它是可点击的。通过可点击，我的意思不仅是它作为下拉列表而且作为普通按钮。如果用户在其上悬停，它将扩展其他菜单，但如果用户点击它，它将重定向到另一个页面。这就是应用.disabled类的原因。但我不希望在用户使用移动设备时应用此类，因此如果用户点击它，它将只会扩展。这就是为什么我需要.disabled类仅适用于桌面的原因。有没有办法实现这个目标？

<li class="dropdown">
   <a href="somePath" class="dropdown-toggle disabled" data-toggle="dropdown">DropDown</a>
   <ul class="dropdown-menu">
       <li><a href="#">menu1</a></li>
       <li><a href="#">menu2</a></li>
   </ul>
</li>

Answer 1

我认为，你应该使用如下的媒体css来实现这一目标。这样做会更容易。

@media (min-width: 990px){
    .disabled {
    //do your styles here
    }
}

并且对于其他屏幕尺寸，只提供必须应用的默认样式。试试吧。

<强>更新

如果屏幕尺寸很大，您可以使用JavaScript动态添加课程disabled，如下所示

function resize() {
    if ($(window).width() > 990) {
     $('.newClass').addClass('disabled');
    }
    else {$('.newClass').removeClass('disabled');}
}

并将$(document).ready()中的函数调用为

$(document).ready( function() {
    $(window).resize(resize);
    resize();
});

此外，在尝试此操作时，不要忘记向<a>添加一个类，使其成为

<a href="somePath" class="dropdown-toggle newClass" data-toggle="dropdown">DropDown</a>

Twitter Boostrap仅适用于桌面版本

1 个答案: