西西木科技丨Shopify开发机构 2022-05-17 00:34 采纳率: 96.4%
浏览 42
已结题

使用ms-Dropdown但是在iPhone无法显示

用了ms-Dropdown插件,在电脑/安卓显示正常
在苹果系统直接无法找到生成的代码块
请问如何解决?

<style>
.ms-pr {
    position:relative
}
.ms-dd:focus-visible {
    box-shadow:0 1px 5px #ddd;
    outline:none;
    outline-width:0
}
.ms-dd {
    background:#eee;
    display:inline-block;
    font-family:Sans-Serif;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    vertical-align:top;
    width:260px
}
.ms-dd button:focus,.ms-dd input:focus,.ms-dd select:focus,.ms-dd textarea:focus {
    outline:none
}
.ms-dd .ms-value-input {
    border:0;
    left:20px;
    position:absolute;
    top:10px;
    width:50%
}
.ms-dd .ms-dd-header {
    border:1px solid #ccc;
    border-bottom:none;
    border-radius:2px;
    cursor:pointer;
    min-height:35px;
    position:relative;
    width:100%
}
.ms-dd .ms-dd-header .option-selected {
    color:#000;
    display:block;
    font-weight:600;
    overflow:hidden;
    padding:10px 20px 10px 10px;
    pointer-events:none
}
.ms-dd .ms-dd-header a {
    display:block
}
.ms-dd .ms-dd-header .ms-list-counter,.ms-dd .ms-dd-header input[type=checkbox] {
    display:none
}
.ms-dd .ms-dd-header .ms-header-counter {
    color:#0e76a8;
    font-weight:400
}
.ms-dd .ms-dd-header .ms-filter-box {
    border-bottom:1px solid #ccc;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    padding:6px 10px
}
.ms-dd .ms-dd-header .ms-filter-box input,.ms-dd .ms-dd-header .ms-filter-box input:focus,.ms-dd .ms-dd-header .ms-filter-box input:focus-visible {
    border:1px solid #c3c3c3;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    height:25px;
    padding-left:6px;
    width:100%
}
.ms-dd .ms-dd-header .ms-filter-box input:focus-visible {
    outline:1px solid transparent
}
.ms-dd .ms-dd-option-image,.ms-dd .ms-dd-selected-img {
    margin-right:5px;
    max-width:64px;
    vertical-align:middle
}
.ms-dd .ms-dd-arrow {
    height:0;
    margin-top:-3px;
    position:absolute;
    right:10px;
    top:50%;
    width:0
}
.ms-dd .ms-dd-arrow.ms-dd-pointer-down {
    border:5px solid transparent;
    border-top-color:#000
}
.ms-dd .ms-dd-arrow.ms-dd-pointer-up {
    border:5px solid transparent;
    border-bottom-color:#000;
    margin-top:-8px
}
.ms-dd .ms-options {
    background:#fff;
    border:1px solid #ccc;
    border-top:none;
    box-shadow:0 1px 5px #ddd;
    display:none;
    list-style:none;
    margin:0;
    overflow:auto;
    padding:0;
    position:absolute;
    width:100%;
    z-index:9999
}
.ms-dd .ms-list-option,.ms-dd .ms-optgroup ul .ms-list-option {
    align-items:center;
    border-bottom:1px solid #ddd;
    color:#333;
    cursor:pointer;
    display:flex;
    justify-content:flex-start;
    overflow:hidden;
    padding:10px;
    position:relative;
    text-decoration:none
}
.ms-dd .ms-list-option input[type=checkbox],.ms-dd .ms-optgroup ul .ms-list-option input[type=checkbox] {
    margin-right:5px;
    vertical-align:middle
}
.ms-dd .ms-list-option:last-child,.ms-dd .ms-optgroup ul .ms-list-option:last-child {
    border-bottom:none
}
.ms-dd .ms-list-option:hover,.ms-dd .ms-optgroup ul .ms-list-option:hover {
    background:#f3f3f3;
    color:#000
}
.ms-dd .ms-list-option.option-selected,.ms-dd .ms-optgroup ul .ms-list-option.option-selected {
    background:#f6f6f6
}
.ms-dd .ms-list-option.ico-align-right .ms-dd-option-image,.ms-dd .ms-list-option.ico-align-right .ms-dd-selected-img,.ms-dd .ms-optgroup ul .ms-list-option.ico-align-right .ms-dd-option-image,.ms-dd .ms-optgroup ul .ms-list-option.ico-align-right .ms-dd-selected-img {
    order:2
}
.ms-dd .ms-list-option.disabled,.ms-dd .ms-list-option:disabled,.ms-dd .ms-optgroup ul .ms-list-option.disabled,.ms-dd .ms-optgroup ul .ms-list-option:disabled {
    cursor:default;
    opacity:.4
}
.ms-dd .ms-list-option .ms-dd-desc,.ms-dd .ms-optgroup ul .ms-list-option .ms-dd-desc {
    color:#aaa;
    display:block;
    font-weight:400;
    line-height:1.5em;
    overflow:hidden;
    text-shadow:0 1px .5px #fff
}
.ms-dd .ms-header-middle-content,.ms-dd .ms-middle {
    display:flex;
    justify-content:flex-start;
    width:100%
}
.ms-dd.disabled,.ms-dd:disabled {
    cursor:default;
    opacity:.4;
    pointer-events:none
}
.ms-dd .ms-optgroup-padding {
    font-weight:700;
    padding:10px 10px 0
}
.ms-dd .ms-optgroup {
    display:block
}
.ms-dd .ms-optgroup:hover {
    background:#fff;
    color:#000
}
.ms-dd .ms-optgroup ul {
    margin:0;
    padding:0
}
.ms-dd .ms-optgroup ul .ms-list-option {
    padding-left:20px
}
.ms-dd .ms-optgroup ul:last-child {
    border-bottom:1px solid #ddd
}
.ms-dd .ms-dd-option-content {
    width:100%
}
:focus {
    outline:none
}
  
</style>
   <script src="https://cdn.jsdelivr.net/npm/ms-dropdown@4.0.3/dist/js/dd.min.js"></script>       
   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<div class="gpo-element gpo-form__group gpo-col-12 show-addon-for-input" data-element-id="select-3">
      <div class="gpo-hidden-data">
         <input type="hidden" data-field-name="select-3" value="snc3" id="inputselect-3" name="properties[select-3]" gpo-data-variant-id="snc3" gpo-data-product-handle="price" xxm-data-price="xxm3">
      </div>
      <label for="select-3" class="gpo-label ">
        <span class="label-content">install3</span>
      </label>
      <div class="gpo-select">
        <select data-type="select" id="select-3" class="gpo-select" name="select-3" data-name="properties[select-3]" data-field-name="select-3" is="ms-dropdown" onchange="detail(this,'inputselect-3')">
          <option selected="" disabled="disabled" value="">Please Select</option>
            <option value="embedded3" gpo-data-product-handle="price" gpo-data-variant-id="40268730105995" data-image="//cdn.shopify.com/s/files/1/0382/7263/0923/products/DM_20220507204825_001_medium.jpg?v=1651927745" xxm-data-price="30">embedded3</option>
            <option value="plug-in3" gpo-data-product-handle="price" gpo-data-variant-id="40268730138763" data-image="//cdn.shopify.com/s/files/1/0382/7263/0923/products/DM_20220507204825_001_medium.jpg?v=1651927745" xxm-data-price="40">plug-in3</option>
        </select>
      </div>
    </div>
  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-05-17 12:04
    关注

    用的ios内置的Safari吗?Safari版本多少?9.1- 以下版本不支持箭头函数

    img

    dd.min.js这文件中用到了箭头函数,导致脚本出错了

    img

    题主最好是换个js插件,比如select2。一定要用这个,那么得奖dd.min.js下载下来,将里面的箭头函数全部改为function(){}这种形式,并注意函数体中this的要进行重新绑定,用function(){}.bind(this)来实现

    img


    有其他问题可以继续交流~

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 7月14日
  • 已采纳回答 7月6日
  • 创建了问题 5月17日

悬赏问题

  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料