(jQuery或JS)在display=none时显示

基础概念

display: none 是CSS中的一个属性值，用于隐藏元素，使其在页面上不可见且不占用空间。当元素的 display 属性设置为 none 时，该元素及其所有子元素都不会被渲染。

类型

jQuery方法：使用jQuery库提供的方法来控制元素的显示和隐藏。
原生JavaScript方法：使用纯JavaScript代码来实现相同的功能。

应用场景

动态内容：根据用户交互或数据变化动态显示或隐藏内容。
表单验证：在用户输入无效时隐藏错误提示，输入有效时显示。
模态框：在不使用时隐藏模态框，点击按钮时显示。

示例代码

使用jQuery显示和隐藏元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Show/Hide Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #myElement {
            display: none;
        }
    </style>
</head>
<body>

<div id="myElement">Hello, World!</div>
<button id="toggleButton">Toggle Display</button>

<script>
    $(document).ready(function() {
        $('#toggleButton').click(function() {
            $('#myElement').toggle();
        });
    });
</script>

</body>
</html>

使用原生JavaScript显示和隐藏元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Show/Hide Example</title>
    <style>
        #myElement {
            display: none;
        }
    </style>
</head>
<body>

<div id="myElement">Hello, World!</div>
<button id="toggleButton">Toggle Display</button>

<script>
    document.getElementById('toggleButton').addEventListener('click', function() {
        var element = document.getElementById('myElement');
        if (element.style.display === 'none') {
            element.style.display = 'block';
        } else {
            element.style.display = 'none';
        }
    });
</script>

</body>
</html>