Question

我有一个选择元素，我只想显示在较小的屏幕上，比如 < 600px。

我希望两个框都出现在更大的屏幕上，但是当我低于 600px 时，我希望选择出现，然后只显示 #core-box 并隐藏 #pro-box，然后根据选择选项，将显示隐藏核心/专业。

如何修改我的 jQuery 来执行此操作？

目前，我在 CSS 媒体查询中隐藏了选择，并以 599 像素显示，但在较大的屏幕上，仅显示 #core-box。

@media all and (min-width: 600px) {
  .blog-filters {
    display: none;
  }
}

$(document).ready(function(){
$("#selectMe").change(function(){
    $( "select option:selected").each(function(){
        if($(this).attr("value")=="core"){
            $("#pro-box").hide();
            $("#core-box").show();
        }
        if($(this).attr("value")=="pro"){
            $("#core-box").hide();
            $("#pro-box").show();
        }
    });
  }).change();
  });

<div class="blog-filters">
  <div class="select-container">
    <select id="selectMe">
      <option value="core">Core</option>
      <option value="pro">Pro</option>
    </select>
  </div>
</div>
<div class="pricing-box" id="core-box">
  <div class="row">
    <div class="column">
      <div class="core">
        <h2>Core</h2>
      </div>
    </div>
  </div>
</div>

<div class="pricing-box" id="pro-box">
  <div class="row">
    <div class="column">
      <div class="core">
        <h2>Pro</h2>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以通过如下更新您的 jquery 代码来实现这一点

$(document).ready(function(){
  $('select').on('change', function() {
    if(this.value === "core"){
        $("#pro-box").hide();
        $("#core-box").show();
    }
    if(this.value === "pro"){
        $("#core-box").hide();
        $("#pro-box").show();
    }
  });
});

并将此代码添加到您的 CSS

@media (max-width: 600px) {
  #pro-box{
    display: none;
  }
}

并且不要忘记将 Pro 框 h2 文本更改为 Pro，这样您就可以看到显示和隐藏的区别，享受！

在小屏幕中显示基于选择的隐藏 div

1 个答案: