Question

我有一个.productSelectInput类的div，它只动态显示我的一些产品，所以我最初使用CSS隐藏了一个.options类的div，但是{{1}可见我希望.productSelectInput再次显示。我以为我的JS下面会工作，但似乎没有。我认为可能是因为.options在选项类中。任何帮助表示赞赏。

这是我的HTML：

.productSelectInput

这是我的CSS： .options {display：none; }

这是我的js：

<div class="options">
   <div class="option">
      <label for="o1">Choose:</label>
      <select id="Grouping_6350746" class="productSelectInput"
      name="AddToCart_Grouping" onchange="DrawProduct(311820,6350746,this.value,'',4);">
         <option value="6350744">Kiwi</option>
         <option value="6350745">Marigold</option>
         <option value="6350746" selected="selected">Strawberry</option>
      </select>
   </div>
</div>

已解决：使用js隐藏选项。

jQuery(document).ready(function() { 
    if ($( ".productSelectInput" ).is(":visible") ) {
        $( ".options" ).show();
    }
 });

Answer 1

您的代码只执行一次：文档准备就绪时。每次页面中的某些内容发生变化时都不会调用它。

由于.productSelectInput最初是隐藏的，因此.options不可见是正常的。

如果您希望.options可见，则必须在每次.productSelectInput可见时进行测试。最简单的方法是将它放在.productSelectInput可见的位置。

为了防止您的问题：当元素变得可见时，不会引发任何事件。你可以定期检查，但我不推荐它。

Answer 2

认为你需要得到最近的父母并且只显示1：

jQuery(document).ready(function(){  
  if ($( ".productSelectInput" ).is(":visible") ) {
    $(this).closest( ".options" ).show();
  }
});

Answer 3

尝试通过JavaScript而不是CSS隐藏.options。 JavaScript可能无法show() 它没有hide()本身的元素。

Answer 4

你的下拉列表应该在div之外否则，由于隐藏了父元素，因此无法看到更改

当第一个div中显示另一个div时显示div

4 个答案: