显示/隐藏选项显示选项,只需单击一下即可删除上一个选择

时间:2018-05-04 10:25:15

标签: javascript jquery jquery-ui

选择器功能在桌面上运行良好,但在本机iphone下拉列表中,您必须取消选择选项才能看到下一个选择。有没有人对如何通过show和隐藏jQuery解决这个问题有任何建议。基本上如果选择下一个选项删除前一个并一次显示一个?



$(function() {
  $('#storeselector').change(function() {
    $('.store-hide').hide();
    $('#' + $(this).val()).show();
  });
});

.store-right {
  float: right;
}

.i-store {
  font-size: 3rem;
  font-family: "Avenir Next", sans-serif;
  font-style: normal;
  font-weight: 600;
  color: inherit;
  text-rendering: optimizeLegibility;
  line-height: 1.2;
  display: block;
  margin: auto;
  text-align: right;
  padding-right: 4%;
}

.store-img {
  max-width: 1150px;
  width: 100%;
  margin: auto;
  display: block;
}

.store-hide {
  display: none;
}

.store-block {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="storeselector" tabindex="2" multiple size="3">
  <option value="level-lg">
    Lower Ground
  </option>
  <option value="level-g">
    Ground Floor
  </option>
  <option value="level-one">
    Level 1
  </option>

</select>

<div id="level-lg" class="store-hide store-block" style="display: block">
  <div class="col-lg-12">
    <span class="i-store">
                                LG
                            </span>
    <img class="store-img" src="https://www.ctshirts.com/on/demandware.static/-/Sites/default/dw468e879c/UK/SS18/Book6/hp-recs1_UK.jpg" alt="" title="">
  </div>
</div>
<div id="level-g" class="store-hide store-block">
  <div class="col-lg-12">
    <span class="i-store">
                                G
                            </span>
    <img class="store-img" src="https://www.ctshirts.com/on/demandware.static/-/Sites/default/dwc0f6b72a/UK/SS18/Book6/hp-recs2_UK.jpg" alt="" title="">
  </div>
</div>
<div id="level-one" class="store-hide store-block">
  <div class="col-lg-12">
    <span class="i-store">
                                1
                            </span>
    <img class="store-img" src="https://www.ctshirts.com/on/demandware.static/-/Sites/default/dwe06b0b29/UK/SS18/Book6/hp-recs3_UK.jpg" alt="" title="">
  </div>
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案