为什么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/