Javascript Onclick函数，用于更改元素的css

我现在有了这个onclick函数：

<p  onclick="open3()" >Uw tuin blijft mooi door vakkundig en regelmatig onderhoud.</p>


function open3 () 
{
    document.getElementById("c").style.display = "block";
}

function open3 () {
 var c = document.getElementById("c");
 if (c.style.display === 'block') {
   c.style.display = 'none';
 } else {
   c.style.display = 'block';
   }
}

Uw tuin blijft mooi door vakkundig en regelmatig onderhoud
函数open3（）
{
document.getElementById（“c”）.style.display=“block”；
}

我想要的是，当我单击open three时，它会以某种方式更改它的值，以便我可以再次单击它以将

样式。显示
设置为
无

我尝试使用一个布尔值，将其设置为
true
或
false
，然后进行更改，但这不起作用
您可以添加一个
if
语句，检查应用样式的当前值并对其进行适当更改

使用这种方法，您不需要在代码中声明（并保留）任何额外的变量，同时仍然能够达到预期的效果

下面是一个例子

function open3 () {
    var c = document.getElementById('c');
    if (c.style.display === 'block') {
       c.style.display = 'none';
    } else {
       c.style.display = 'block';
    }
}

尝试在函数中使用检查：

<p  onclick="open3()" >Uw tuin blijft mooi door vakkundig en regelmatig onderhoud.</p>


function open3 () 
{
    document.getElementById("c").style.display = "block";
}

function open3 () {
 var c = document.getElementById("c");
 if (c.style.display === 'block') {
   c.style.display = 'none';
 } else {
   c.style.display = 'block';
   }
}

使用纯Javascript：

function open3 () 
            {
                if (document.getElementById("c").style.display == "block")
                    document.getElementById("c").style.display = "none";
                else
                     document.getElementById("c").style.display = "block";
            }

或者您可以使用jQuery：

function opne3()
{
   $("#c").toggle();
}

希望能有所帮助。
我的方法稍有不同，创建了一个toggler函数，该函数返回一个函数，用初始状态切换传递给它的任何元素。只要需要切换元素，就可以继续重用此函数，这样就不会重复代码

var toggler = function(el, init) {
  var flag = init;
  return function(e) {
    flag = !flag;
    el.style.display = flag ? 'block' : 'none';
  };
}

创建一个新函数，传入要切换的元素及其初始状态

var toggleC = toggler(document.querySelector('#c'), false);

删除内联JS（最佳实践），并使用
addEventListener
以元素为目标

document.querySelector('#clicker').addEventListener('click', toggleC);

此页上的if/else答案的简短版本：

function open3 () {
    var c = document.getElementById('c');
    c.style.display = (c.style.display == 'block' ? 'none': 'block');
}

试试这个

HTML:

<p id="togglethingy">Uw tuin blijft mooi door vakkundig en regelmatig onderhoud.

#togglethingy{
    display:block;
}

$(function(){
    var $tog_ele = $("#togglethingy")
    $tog_ele.click(function() {
        $tog_ele.toggle();
    });
});

jQuery:

<p id="togglethingy">Uw tuin blijft mooi door vakkundig en regelmatig onderhoud.

#togglethingy{
    display:block;
}

$(function(){
    var $tog_ele = $("#togglethingy")
    $tog_ele.click(function() {
        $tog_ele.toggle();
    });
});

是否确实要更改调用的函数或切换可见性？只需更改
open3
函数以使用
if
语句检查
.style.display==“block”
，如果是，将其设置为
“none”
，否则设置为
“block”
…如果确实要更改函数，这也可以做到，但这将是一种不同寻常的方法。在第一个示例中，您应该将
document.getElementById（“c”）
缓存在变量中。谢谢，这非常完美，现在我发现这比我想象的要简单得多