Question

我目前正在使用Bootstrap构建一个网站。我的导航栏中列出了“服务”链接，当悬停时会显示服务列表。用户还可以单击“服务”本身，并将它们定向到链接。如果用户调整其屏幕大小，或者正在查看其移动设备上的网站，我需要能够从“服务”中删除该链接。

以下代码的作品。当我尝试多次调整桌面浏览器的大小时，我遇到了一个错误。一旦我将屏幕缩小，我就无法识别更大的浏览器窗口，因此，请回到“服务”中的链接。我错过了什么？

HTML

<li class="dropdown">
    <a href="#services" class="dropdown-toggle linkedDropDown" data-toggle="dropdown">Services
         <i class="fa fa-angle-down"></i>
    </a>
    <ul class="dropdown-menu">
         <li>
              <a href="">Link 1</a>
         </li>
         <li>
              <a href="">Link 2</a>
         </li>
         <li>
              <a href="">Link 3</a>
         </li>
         <li>
              <a href="">Link 4</a>
         </li>
    </ul>
</li>

CSS

@media (min-width:990px){
    .dropdown:hover .dropdown-menu {
        display: block !important;
        margin-top: 0 !important;
     }
}

的jQuery

$(document).ready(function () {
     changeElements();

     $(window).resize(function() {
          changeElements();
     });
 });

function changeElements(){
     if ($(window).width() < 990) {
           $('.linkedDropDown').removeAttr('href');
     }
     else{
           $('.linkedDropDown').attr('href');  
     }
 }

Answer 1

如果您使用的是Bootstrap，则可以添加d-*-none类来隐藏某个像素宽度的元素，或d-*-block来显示特定像素宽度的元素。

例如，如果您想隐藏移动设备上的“服务”链接，可以将类d-none和d-sm-block添加到链接代码中。当屏幕宽度小于544px时，这将隐藏链接，但在所有较大的屏幕尺寸上显示它。

通过添加这些类，您将无需使用当前的JavaScript。

有关响应式实用程序类的更多文档，请访问：https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

Answer 2

通过删除data-toggle属性进行检查，并更改不需要下拉列表的屏幕的类。希望这应该有效

如何根据窗口大小在Bootstrap导航栏中获取链接以消失/重新显示？

2 个答案: