Javascript 下拉菜单不支持'；t work移动浏览器&；火狐_Javascript_Html_Browser

Javascript 下拉菜单不支持'；t work移动浏览器&；火狐

javascript html browser

Javascript 下拉菜单不支持'；t work移动浏览器&；火狐,javascript,html,browser,Javascript,Html,Browser,我不能在移动浏览器（Safari）中使用此下拉列表。我能知道问题出在哪里吗？它在Chrome、Safari等桌面浏览器中运行良好。。此代码由Adobe Muse生成我还在iphone6plus中尝试了这段代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body { font-family: 'Asap', sans-seri

我不能在移动浏览器（Safari）中使用此下拉列表。我能知道问题出在哪里吗？它在Chrome、Safari等桌面浏览器中运行良好。。此代码由Adobe Muse生成

我还在iphone6plus中尝试了这段代码

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
     <style>

 body {
   font-family: 'Asap', sans-serif;
   color: #7F7F7F;
 }
 /* Dropdown style */
 .dropdown {
   margin: 0 auto;
   margin-bottom: 1em;
 }
 .dropdown dt a {
   display: block;
   height: 2.5em;
   width: 298px;
   border: 1px solid #ecf0f1;
   border-radius: 3px;
   text-decoration: none;
 }
 .dropdown dt a:hover, .dropdown dt a:active {
   border-color: #eeeeee;
 }
 .dropdown dt span {
   display: block;
   padding: 0 1em;
   line-height: 2.5em;
   border-right: 1em solid transparent;
   cursor: pointer;
 }
 .dropdown dd {
   position: relative;
 }
 .dropdown dd ul {
   display: none;
   position: absolute;
   left: -40px;
   top: -1.0em;
   width: 298px;
   list-style: none;
   background: #fff none repeat scroll 0 0;
   border: 1px solid #bdc3c7;
   border-radius: 3px;
 }
 .dropdown dd ul li:first-child a:hover {
   border-radius: 3px 3px 0 0;
 }
 .dropdown dd ul li:last-child a:hover {
   border-radius: 0 0 3px 3px;
 }
 .dropdown dd li a {
   display: block;
   line-height: 2.5em;
   text-decoration: none;
 }
 .dropdown dd li a:hover {
   background-color: #F6F6F6;
   color: #7F7F7F;
   cursor: pointer;
 }

 .selected {
   font-weight: 700;
 }

 </style>
 </head>
  <body>
 <dl class="dropdown">
     <dt><a><span>What's your budget?</span></a></dt>
         <dd>
             <ul>
                 <li><a>I'll mention my budget below</a></li>
                 <li><a>I don't know my budget yet</a></li>
                 <li><a>I'd rather not share my budget</a></li>

             </ul>
         </dd>
 </dl>
      <script type="text/javascript">
     var dropdowns = $(".dropdown");

 // Onclick on a dropdown, toggle visibility
 dropdowns.find("dt").click(function(){
     dropdowns.find("dd ul").hide();
     $(this).next().children().toggle();
 });

 // Clic handler for dropdown
 dropdowns.find("dd ul li a").click(function(){
     var leSpan = $(this).parents(".dropdown").find("dt a span");

     // Remove selected class
     $(this).parents(".dropdown").find('dd a').each(function(){
     $(this).removeClass('selected');
   });

     // Update selected value
     leSpan.html($(this).html());

     // If back to default, remove selected class else addclass on right element
     if($(this).hasClass('default')){
     leSpan.removeClass('selected')
   }
     else{
         leSpan.addClass('selected');
         $(this).addClass('selected');
     }

     // Close dropdown
     $(this).parents("ul").hide();
 });

 // Close all dropdown onclick on another element
 $(document).bind('click', function(e){
     if (! $(e.target).parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
 });
     </script>


 </body>

 </html>


身体{
字体系列：“尽快”，无衬线；
颜色：#7F7F7F；
}
/*下拉式*/
.下拉列表{
保证金：0自动；
边缘底部：1米；
}
.下拉列表dt a{
显示：块；
高度：2.5em；
宽度：298px；
边框：1px实心#ecf0f1；
边界半径：3px；
文字装饰：无；
}
.下拉列表dt a:悬停，.下拉列表dt a:激活{
边框颜色：#eeeeee；
}
.下拉列表dt span{
显示：块；
填充：0.1em；
线高：2.5em；
右边框：1em实心透明；
光标：指针；
}
.下拉列表dd{
位置：相对位置；
}
.下拉菜单dd ul{
显示：无；
位置：绝对位置；
左：-40px；
顶部：-1.0em；
宽度：298px；
列表样式：无；
背景：#fff无重复滚动0；
边框：1px实心#bdc3c7；
边界半径：3px；
}
.下拉列表dd ul li:第一个孩子a:悬停{
边界半径：3px3px0；
}
.下拉列表dd ul li:最后一个孩子a:悬停{
边界半径：0 0 3px 3px；
}
.下拉列表dd li a{
显示：块；
线高：2.5em；
文字装饰：无；
}
.下拉列表dd li a:悬停{
背景色：#F6F6F6；
颜色：#7F7F7F；
光标：指针；
}
.选定{
字号：700；
}
你的预算是多少？

我会在下面提到我的预算
我还不知道我的预算
我宁愿不分享我的预算

var下拉列表=$（“.dropdown”）；
//单击下拉列表，切换可见性
下拉列表。查找（“dt”）。单击（函数（）{
dropdowns.find（“dd ul”）.hide（）；
$（this.next（）.children（）.toggle（）；
});
//用于下拉列表的Clic处理程序
下拉列表。查找（“dd ul li a”）。单击（函数（）{
var leSpan=$（this）.parents（“.dropdown”）.find（“dta span”）；
//删除所选类
$（this）.parents（“.dropdown”）.find（'dda'）.each（function（）{
$（this.removeClass（'selected'）；
});
//更新所选值
html（$（this.html（））；
//如果返回默认值，则删除选定的类，否则在右侧元素上添加类
if（$（this）.hasClass（'default'））{
leSpan.removeClass（'selected'）
}
否则{
leSpan.addClass（“选定”）；
$（this.addClass（'selected'）；
}
//关闭下拉列表
$（this.parents（“ul”）.hide（）；
});
//单击另一个元素时关闭所有下拉列表
$（文档）.bind（'click'，函数（e）{
if（！$（e.target.parents（）.hasClass（“下拉菜单”）$（.dropdown dd ul”）.hide（）；
});

您是否在代码中添加了jQuery库

尝试将其添加到特定脚本标记之前

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
 var dropdowns = $(".dropdown");


var下拉列表=$（“.dropdown”）；

等等……

你应该更具体地说明你所面临的问题。至少我们需要你们国家的预期行为和实际行为。