為什么JQuery顯示/隱藏對按鈕有效但對div無效？

Question

我想根據條件切換按鈕和div的顯示或隱藏。 當前，JQuery隱藏適用於button（），但show（）不適用於div。 換句話說，在下面的javascript中，如果滿足條件，則按鈕是隱藏的，但div不顯示。

的HTML：

<button type="button" id="my-button" onclick="...do something">Go</button>
<div id="my-text">Please send an email to help@mycompany.com</div>

CSS：

#my-text{
    display: none;
}

javascript：

<script type="text/javascript">
    (function() {
        $(document).ready(function() {
            var someConditionIsMet = //...compute something
            if (someConditionIsMet) {
                $('#my-button').hide();
                $('#my-text').show();
            }
        });
    })();
</script>

但是，如果我將其更改為

            if (someConditionIsMet) {
                $('#my-button').hide();
                $('#my-text').attr("style", "display:block")
            }

然后它可以正常工作。 我以為show基本上是在改變顯示樣式以阻止顯示，所以我不確定為什么必須這樣拼寫出來。 有什么想法嗎？

Answer 1

您可以將代碼簡化到

$('#my-button, #my-text').toggle();

這會影響元素的可見性，但是可能無法解決您的問題，這很可能與您首先隱藏div的方式有關。 嘗試將其更改為.hide（），而不是手動設置css。 隱藏元素有幾種方法。show只還原其中一種（與hide（）相同）

Answer 2

在這個小提琴中 show對我有用 。 您確定您的條件得到滿足嗎？ 嘗試引發alert('conditions met'); 在if中查看是否被觸發。

Answer 3

考慮分配aria-hidden屬性，然后使用jQuery隱藏您指定為屏幕閱讀器隱藏的所有內容。

碼：

<button type="button" id="my-button" onclick="...do something" aria-hidden="true">Go</button>

JavaScript：

$('[aria-hidden="true"]').hide(); //hide anything that's marked as hidden to screen-readers

然后使用.hide（）和.show（），以及aria-hidden屬性的切換。

請參見http://jsfiddle.net/jhfrench/4kNPF/