“显示/隐藏”一个带有javascript而不是jquery的div，而不是display：none

Posted 2023-02-21

【中文标题】“显示/隐藏”一个带有javascript而不是jquery的div，而不是display：none

【英文标题】："show/hide" a div with javascript not jquery, and not with display:none

【发布时间】：2017-05-08 11:36:48

【问题描述】：

我需要显示/隐藏一个 div，但是：

不能使用 jquery：因为，togle()、slideTogle()、fade、animate 等，它们都使用 display:none，我需要使用 DOM 中的空间的 div（我将在那里处理事情）。

到目前为止，我只让 div 获得样式可见性：隐藏和阻止，通过单击一些“切换”按钮，它可以正常工作，但我不知道如何在显示上添加一些效果，例如切换（ 'slow') 会。

我的 CSS：

.show, .show * 
    visibility: inherit  !important;


.hide, .hide * 
    visibility: hidden !important;

我的反应/js：

toggleCharts:function()
    //$("#chartBox").toggle();
    if (this.state.className === 'hide')
        this.setState(className: 'show');
    else
        this.setState(className: 'hide');

要隐藏的 Div：

<div id="chartBox" className=this.state.className></div>

【参考方案1】：

保持你的 React/jQ 原样，但使用 CSS 过渡显示和隐藏你的元素，比如用不透明度淡化：

.show 
    opacity: 1 !important;
    transition: opacity .5s;


.hide 
    opacity: 0 !important;
    transition: opacity .5s;

【讨论】：

我在尝试类似的东西，让我们看看。

工作 99% 好，除了一个原因，div 的子元素之一现在是黑色的，但我必须检查原因。让我也试试其他答案（但正如我所说，我不想使用 jquery ...）

@pmirnd 有没有可能孩子最初是半透明的，不透明？您实际上不需要, .show * 和, .hide * 规则，因为隐藏/显示父元素就足够了——这可能会解决它。我更新了我的答案。

啊，是的，该元素（是 c3.js 图表）的不透明度为 0，因此使用 .show 我将其设置为 1。我这样做是因为某些元素是“可见性：可见“并且我需要将它们全部隐藏”，这就是为什么我的原始 css 是：* 可见性：隐藏或继承。继承所有子元素变为或隐藏或可见

不错！现在完全有效。谢谢，不知道不透明度。

【参考方案2】：

试试：$('#chartBox').animate(opacity : 0, 500);

【讨论】：

好吧，我说不能是jQuery，但是谢谢（没用）

是的，但是你的问题是 display: none ，在这种情况下，显示属性没有被触及，只有不透明度被改变