Question

我想制作一个节目并隐藏我的部分。

目前正在运作。

但我希望您在进入网站时隐藏我的部分，然后当您点击它时会显示。现在是另一种方式。

我如何解决这个问题？

 document.querySelector("#about").addEventListener("click", function   (event) {
    event.preventDefault();
}, false);

function showAbout() {
    var myAbout = document.getElementById('about');
    if (myAbout.style.display === 'none') {
        myAbout.style.display = 'block';
    }
    else {
        myAbout.style.display = 'none';
    }
}

Answer 1

您可以创建一个css类：

.hidden {
  display: none;
}

将此类添加到html中的部分。然后：

document.querySelector("#about")
        .addEventListener("click", function (event) {
           event.preventDefault();
           event.target.classList.toggle('hidden');
        }, false);

Answer 2

在css放置

中

#about {
    display: none;
}

Answer 3

将初始化程序包装在IIFE中，或通过默认的CSS类将display: none添加到元素中。

＆＃13;

var myAbout = document.getElementById('about');

function showAbout() {
    if (myAbout.style.display === 'none') {
        return myAbout.style.display = 'block';
    }
    return myAbout.style.display = 'none';
}

// Init
(function(){
    myAbout.style.display = 'none';
})();

＆＃13;

Javascript显示隐藏

3 个答案: