Javascript 当在第一个div内可以看到另一个div时显示一个div

我有一个带有.productSelectInput类的div，它只动态显示我的一些产品，因此我最初使用CSS隐藏带有.options类的div，但当.productSelectInput可见时，我希望再次显示.options。我以为我下面的JS可以工作，但似乎不行。我想可能是因为.productSelectInput在options类中。感谢您的帮助

这是我的HTML：

<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();
    } else {
    $( ".options" ).hide();
    }
 });    

---

您的代码只执行一次：当文档准备就绪时。它不会在页面中每次发生更改时调用

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

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

---

为了避免您的问题：当元素变得可见时，不会引发任何事件。您可以定期检查，但我不建议您这样做。

您认为需要找到最接近的家长，只显示1:

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

尝试通过JavaScript而不是CSS隐藏.options。JavaScript可能无法显示

---

它没有隐藏自己的元素。

您的下拉列表应该在div之外

---

否则，它将无法更改，因为父元素正在被隐藏。

。productSelectInput是一个选择下拉列表或div？由于选项被隐藏，并且它包装了您的选择，您的选择将如何显示它是否始终被隐藏？我的意思是。。我不明白你想实现什么。productSelectInput将永远不可见。选项可能不可见。很难判断页面上是否有多个div.options

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