我是否需要使用Jquery作为下拉菜单才能在所有设备上运行？

在互联网上似乎没有确切的答案。我的网站有一个下拉菜单，为此使用Jquery。我已经看到一些CSS只下拉菜单，但这些似乎在某些移动浏览器（Opera是其中之一）中的hover有问题。我是否需要使用Jquery作为下拉菜单才能在所有设备上运行？

我应该使用jquery还是只有css下拉菜单？

下拉我的网站必须工作：

手机/平板电脑： Safari浏览器，铬， Android浏览器，的Opera Mini， IE

桌面：铬， IE， Safari浏览器，火狐，歌剧

这里是CSS的代码只能下载到，但在使用Opera移动版时不会下降。它在具有hover效果，这对于移动问题显然

HTML：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>CSS Only Navigation Menu</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <label for="show-menu" class="show-menu">Show Menu</label> 
    <input type="checkbox" id="show-menu" role="button"> 
    <ul id="menu"> 
     <li><a href="#">Home</a></li> 
     <li> 
      <a href="#">About &#65516;</a> 
      <ul class="hidden"> 
       <li><a href="#">Who We Are</a></li> 
       <li><a href="#">What We Do</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">Portfolio &#65516;</a> 
      <ul class="hidden"> 
       <li><a href="#">Photography</a></li> 
       <li><a href="#">Web &amp; User Interface Design</a></li> 
       <li><a href="#">Illustration</a></li> 
      </ul> 
     </li> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</body> 
</html>

CSS：

/*Strip the ul of padding and list styling*/ 
ul { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    position: absolute; 
} 

/*Create a horizontal list with spacing*/ 
li { 
    display:inline-block; 
    float: left; 
    margin-right: 1px; 
} 

/*Style for menu links*/ 
li a { 
    display:block; 
    min-width:140px; 
    height: 50px; 
    text-align: center; 
    line-height: 50px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    color: #fff; 
    background: #2f3036; 
    text-decoration: none; 
} 

/*Hover state for top level links*/ 
li:hover a { 
    background: #19c589; 
} 

/*Style for dropdown links*/ 
li:hover ul a { 
    background: #f3f3f3; 
    color: #2f3036; 
    height: 40px; 
    line-height: 40px; 
} 

/*Hover state for dropdown links*/ 
li:hover ul a:hover { 
    background: #19c589; 
    color: #fff; 
} 

/*Hide dropdown links until they are needed*/ 
li ul { 
    display: none; 
} 

/*Make dropdown links vertical*/ 
li ul li { 
    display: block; 
    float: none; 
} 

/*Prevent text wrapping*/ 
li ul li a { 
    width: auto; 
    min-width: 100px; 
    padding: 0 20px; 
} 

/*Display the dropdown on hover*/ 
ul li a:hover + .hidden, .hidden:hover { 
    display: block; 
} 

/*Style 'show menu' label button and hide it by default*/ 
.show-menu { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    text-decoration: none; 
    color: #fff; 
    background: #19c589; 
    text-align: center; 
    padding: 10px 0; 
    display: none; 
} 

/*Hide checkbox*/ 
input[type=checkbox]{ 
    display: none; 
    -webkit-appearance: none; 
} 

/*Show menu when invisible checkbox is checked*/ 
input[type=checkbox]:checked ~ #menu{ 
    display: block; 
} 


/*Responsive Styles*/ 

@media screen and (max-width : 760px){ 
    /*Make dropdown links appear inline*/ 
    ul { 
     position: static; 
     display: none; 
    } 
    /*Create vertical spacing*/ 
    li { 
     margin-bottom: 1px; 
    } 
    /*Make all menu links full width*/ 
    ul li, li a { 
     width: 100%; 
    } 
    /*Display 'show menu' link*/ 
    .show-menu { 
     display:block; 
    } 
}

来源

2015-03-31 Leona grey

@Stewartside我已经发布了仅用于CSS下拉菜单的代码，但在使用手机Opera时不会下降。谢谢！ – 2015-03-31 10:28:22

我要说的是，使用JQuery。将会有一些人阻止它，但是如果你想要一个体面的，功能性的网站，你将会使用JQuery和其他一些第三方工具。

来源

2015-03-31 10:41:04 Dan

jQuery的（基于JavaScript）是最有力的工具之一网站管理员可以使用。如果你不确定是否使用它，因为你不想知道它，让我给你一个建议：不要浪费时间，现在就学习jquery吧！你会惊讶它有多强大。

如果你已经知道的jQuery我不明白为什么你不应该使用它，说实话......

来源

2015-03-31 10:30:17

谢谢，我知道jquery，我只关心使用javascript，因为有人可能会禁用它，然后他们将无法浏览网站。 – 2015-03-31 10:35:06

这是一个有效的论点。不过，我认为你更有可能找到一个不支持你的css3复杂属性的浏览器，而这个属性只是用CSS而不是JavaScript来禁用浏览器。但这只是我的看法。 – 2015-03-31 10:41:01

我是否需要使用Jquery作为下拉菜单才能在所有设备上运行？

回答

相关问题