Javascript 可在PC上悬停，但可在其他设备上单击菜单_Javascript_Html_Css_Twitter Bootstrap

Javascript 可在PC上悬停，但可在其他设备上单击菜单

javascript html css twitter-bootstrap

Javascript 可在PC上悬停，但可在其他设备上单击菜单,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我一直在使用Twitter引导来创建下拉菜单，但问题是我将菜单设置为可悬停而不是OnClick切换，是否有可能让菜单OnClick切换像我设置为可悬停之前一样折叠，仅在其他触摸设备上悬停 <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU

我一直在使用Twitter引导来创建下拉菜单，但问题是我将菜单设置为可悬停而不是OnClick切换，是否有可能让菜单OnClick切换像我设置为可悬停之前一样折叠，仅在其他触摸设备上

悬停

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<nav class="navbar navbar-toggleable-md navbar-light">
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="dropdown">
                <a class="nav-link dropdown" href="#">
          Dropdown link
        </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">1</a>
                    <a class="dropdown-item" href="#">2</a>
                    <a class="dropdown-item" href="#">3</a>
                    <a class="dropdown-item" href="#">4</a>
                    <a class="dropdown-item" href="#">5</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

<style>
    .dropdown-menu {}

    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
</style>






.下拉菜单{}
.下拉菜单：悬停.下拉菜单{
显示：块；
边际上限：0；
}

在基本引导代码中，我们将

data toggle=“dropdown”

和

id=“dropdownMenuButton”aria labelledby=“dropdownMenuButton”

所以我想知道，是否有可能使它的基本再次触摸设备

您可以使用

@media

查询和CSS中与引导相同的断点，并且仅将

悬停

应用于非移动设备断点：

@media only screen and (min-width : 320px) {
    /* Custom, iPhone Retina */    
}

@media only screen and (min-width : 480px) {
    /* Extra Small Devices, Phones */ 
}

@media only screen and (min-width : 768px) {
    /* Small Devices, Tablets */
}

/* Medium Devices, Desktops, Large Devices, Wide Screens */
@media only screen and (min-width : 992px) {
    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

这是基于Bootstrap的3个断点。

这将导致悬停仅在比

992px

更宽的屏幕上生效。我以前确实没有了解有关此媒体查询的任何信息，我是否应该为每个查询键入CSS代码？如果我想要多个样式，我可以使用这些查询以不同的宽度更改所有内容吗？最后，我必须把这些查询放在每个页面上吗？这样做也很有意义，因为据我所知，hover在移动设备上的工作方式有点不同（依赖于浏览器）。在移动设备上，第一次点击作为悬停，第二次点击作为选择。通常不是您真正想要的。媒体查询本质上允许您为每个像素宽度（也可以是另一个属性）间隔定义特定的css属性。这里有一个链接，但它仍然是一个问题，因为悬停只能在（最小宽度：992px）上正常工作，但我的代码只用于悬停或单击，如果我将代码更改为基本代码，它将破坏悬停效果。@CaliburVictoriaus当然你不需要在每个页面上放置查询-将它们放置在CSS文件中一次，并将文件包含在您需要的位置。使用

@media

时，您不会遇到问题，因为在桌面设备上悬停时下拉列表将“自动”打开，而在移动设备上不会出现悬停效果，因为您没有CSS可以在小型设备上进行悬停，所以它将是一个常规的可单击元素。