下拉菜单不适用于移动浏览器

Posted 2023-05-09

【中文标题】下拉菜单不适用于移动浏览器

【英文标题】：Dropdown is not working for mobile browser

【发布时间】：2019-01-04 12:58:50

【问题描述】：

我使用了 jquery 插件，下拉菜单适用于桌面视图，但下拉菜单在移动浏览器中不起作用。我该如何解决这个问题？这是代码sn-p。

var mob_num = $('#mobile-number');
window.default_country_iso_code 
mob_num.intlTelInput(
  defaultCountry: "auto",
  geoIpLookup: function(callback) 
    $.getJSON('/geo_api/get_country_iso_code', function() , "jsonp").always(function(resp) 
      var countryCode = (resp && resp.country_iso_code) ? resp.country_iso_code : "";
      callback(countryCode);
      window.default_country_iso_code = resp.country_calling_code
      mob_num.val("+" + resp.country_calling_code + " ");

    );
  
); 

这是html。

 <div class="control-group <%= "error" if @errors.present? && @errors.messages.has_key?(:phone)  %>" >
   <label class="control-label required" for="mobile-number">Phone </label>
    <div class="controls">
      <input class="intl-tel-input" type="tel" id="mobile-number" name="client[phone]" value="<%= params['client']['phone'] if params['client'].present? %>" required>
          <% if @errors.present? %>
             <% if @errors.messages.has_key?(:phone) %>        
                 <div class="help-block"><strong><%= @errors.messages[:phone][0].to_s %></strong></div>
              <% end %>
           <% end %>
         <div class="help-block"></div>
      </div>
   </div>

用于此的 css。

#wrapper 
    width: 70%;
    margin: 20px auto;


.setup-wizard-logo-container 
    margin: 10px 0;


.box 
    border: 1px solid #bbb;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .067);
    .border-radius(5px);
    overflow: hidden;
    background: #fff;


form 
    margin-bottom: 0px;


.intl-tel-input 
    height: 28px !important;
    width: 97%;

其余的 css 由库本身添加到它的容器中。

【问题讨论】：

你能更新你相关部分的css吗

@Ramesh 我更新了我的问题。

not working 是什么意思？

当我点击它时，下拉菜单没有打开。

@NeerajAmoli 你的媒体查询怎么样？在 css 中可能会出现多种原因。添加您的媒体查询

【参考方案1】：

这对我有用，我只是增加其中一个库 css 类的 z-index。

.intl-tel-input select
  z-index: 3;