1

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

这是我的 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>

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

这是我的js：

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

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

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

4 回答 4

0

您的代码只执行一次：当文档准备好时。每次您的页面发生更改时，它都不会被调用。

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

如果你想让你.options变得可见，你必须在每次有可能.productSelectInput变得可见时进行测试。最简单的就是把它放在你.productSelectInput看得见的地方。

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

于 2012-08-30T20:21:40.253 回答
0

认为您需要获得最近的父母并仅显示 1：

jQuery(document).ready(function(){  
  if ($( ".productSelectInput" ).is(":visible") ) {
    $(this).closest( ".options" ).show();
  }
});
于 2012-08-30T20:22:30.363 回答
0

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

于 2012-08-30T20:26:53.747 回答
0

您的下拉菜单应该在 div 之外，
否则更改将不可见，因为父元素被隐藏

于 2012-08-30T20:30:19.660 回答