(jQuery) 将 div 样式“display:none”切换为“display:inline”答案

【问题标题】：(jQuery) Toggle div style "display:none" to "display:inline"(jQuery) 将 div 样式“display:none”切换为“display:inline”
【发布时间】：2012-04-02 18:26:12
【问题描述】：

我有 2 个 div，我希望能够在单击按钮时在它们之间切换（当前使用 .toggle();)

页面上显示的 div 是 div1。此 div 的样式为“显示：内联”。我的另一个 div (div2) 以样式 'display:none' 开头。

当 div1 切换到 div2 时，我希望 div2 具有“display:inline”的样式。我该怎么做？

编辑：这是有效的：

$(function(){
  $('#button').click(function(){

    $('#div1').toggleClass('hide');

if ($('#div2').is('.hidden')) {

          $('#div2').removeClass('hidden');
          $('#div2').addClass('show');


      }
      else{

          $('#div2').addClass('hidden');
          $('#div2').removeClass('show');


      }


  });
});

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

我会使用.toggleClass() 作为display: inline; 和display: block; 之间的切换开关

创建一个隐藏的内联类，然后切换它们。

【讨论】：

我正在尝试这个，但 div2 没有显示。我更新了问题中的代码。
我的错误，我在问题中使用的脚本正在运行！忘记清除缓存了：）谢谢！

【解决方案2】：

使用纯 JavaScript，您可以使用：

document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'inline';

【讨论】：

【解决方案3】：

这是一个简单的方法：

对于 html，我们有一个简单的按钮来调用“toggleFunction”，它将根据需要向我们的 Div 元素添加和删除显示类。

<button onclick="toggleFunction()" >Click to toggle</button>

<div id="div1" class=" " > Now showing "Div 1" </div>

<div id="div2" class=" " > Now showing "Div 2" </div>
我们将Div 1和Div 2的默认显示属性分别设置为“inline”和“none”，这样默认情况下：
- Div 1 已显示，并且
- 第 2 部分已隐藏。

这里是 css：

#div1 {
    display: inline;
    color:blue;
}

#div2 {
    display: none;
    color:red;
}

.display-none {
    display: none !important;
}

.display-inline {
    display: inline !important;
}

最后，我们将使用 Jquery 在单击按钮时调用“toggleFunction”，分别在 Div 1 和 Div 2 中添加和删除“display-none”和“display-inline”类。

这里是 Jquery：

  function toggleFunction() {
    $("#div1").toggleClass("display-none");    
    $("#div2").toggleClass("display-inline");    
  }

您可以在 codepen 上试用：http://codepen.io/anon/pen/vEbXwG

【讨论】：

【解决方案4】：

制作你自己的if 子句来切换 div 的样式：

$(document).on("click","#mybutton",function(){
  var toggled=$("#mydiv");
  
  // instead of this which would make a block appear
  // toggled.toggle();
  
  // do this: create your own toggle if clause.
  if(toggled.is(":visible"))
    toggled[0].style.display="none";
  else
    toggled[0].style.display="inline";
});

#mydiv{
 display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="mydiv">hello</div>
<button id="mybutton">toggle</button>

【讨论】：