切换整个 div 无响应

Question

我有一个提交按钮，目前运行 2 个函数，但稍后会运行 3 个函数。

1. 点击时隐藏段落
2. Onclick 使 div 变为切换（将自身变为切换）。
3. 将数据插入数据库。

我已成功完成任务 1，我正在处理任务 2，但是现在我已将 onclick 添加到任务 2 的按钮上，onclick 页面变为白色，一切都消失了。

所以我的问题是，是否可以切换整个 div 以及其中的所有内容。这个想法是用户输入产品名称和描述并单击添加的那一刻。整个 div 将变成一个切换。

//turn entire div into toggle
            function toggle_visibility(id) {
                var e = document.getElementById(id);
                if (e.style.display == 'block' || e.style.display == '')
                    e.style.display = 'none';
                else
                    e.style.display = 'block';
            }

  //hide text onclick
            $(document).ready(function() {
                var $p = $('p#menu_title');
                $("input#save_first_prod").click(function(event) {
                    event.preventDefault();
                    $p.css('display', 'none');
                });
            });

.hidden {
    display: visible; 
}
div#first_product{
width: 50%;
margin: auto;
    
}

div#red_head{
background-color: #ed1c24;
height: 40px;
color: #fff;
padding-left: 15px;
line-height: 35px;
}

div#first_product{
background-color: #f1f1f2; 
height: 100%;
}

h3#menu{
color: #6d6e70;
padding-left: 15px;
}

        

<div id="first_product">
            <div id="red_head">
                <p id="menu_title" class ="hidden" onclick="hideText('text1')" > Add your first menu item</p>
            </div>
            <h3 id="menu">Menu Section</h3>

            <form name="first_prod" id="first_prod" enctype="multipart/form-data" action="testing.php" method="post" accept-charset="utf-8" >               

                <label id="cat_label" name="cat_label">Name</label>
                <input type="text" id="cat_name" name="cat_name" value="">

                <label id="desc_label" name="desc_label">Description</label>
                <input type="text" id="cat_desc" name="cat_desc" value="">

                <input type="Submit" id="save_first_prod" name="save_first_prod" onclick="toggle_visibility('first_product')" value=" + ADD"> 

            </form>


        </div>

删除“添加您的第一个菜单项”的任务 1 有效，直到我添加了第二个切换按钮，每个按钮上不可能有多个功能。

Answer 1

整个页面变为白色，因为您正在切换整个页面，因为 div 是整个页面。所以现在我们知道为什么屏幕变黑了。如果您在 div 之外添加了一个按钮，那么您可以切换它。希望这会有所帮助。

//turn entire div into toggle
            function toggle_visibility(id) {
                var e = document.getElementById(id);
                if (e.style.display == 'block' || e.style.display == '')
                    e.style.display = 'none';
                else
                    e.style.display = 'block';
            }

  //hide text onclick
            $(document).ready(function() {
                var $p = $('p#menu_title');
                $("input#save_first_prod").click(function(event) {
                    event.preventDefault();
                    $p.css('display', 'none');
                });
            });

.hidden {
    display: visible; 
}
div#first_product{
width: 50%;
margin: auto;
    
}

div#red_head{
background-color: #ed1c24;
height: 40px;
color: #fff;
padding-left: 15px;
line-height: 35px;
}

div#first_product{
background-color: #f1f1f2; 
height: 100%;
}

h3#menu{
color: #6d6e70;
padding-left: 15px;
}

<button onclick="toggle_visibility('first_product')">Hello!</button>

<div id="first_product">
            <div id="red_head">
                <p id="menu_title" class ="hidden" onclick="hideText('text1')" > Add your first menu item</p>
            </div>
            <h3 id="menu">Menu Section</h3>

            <form name="first_prod" id="first_prod" enctype="multipart/form-data" action="testing.php" method="post" accept-charset="utf-8" >               

                <label id="cat_label" name="cat_label">Name</label>
                <input type="text" id="cat_name" name="cat_name" value="">

                <label id="desc_label" name="desc_label">Description</label>
                <input type="text" id="cat_desc" name="cat_desc" value="">

                <input type="Submit" id="save_first_prod" name="save_first_prod" onclick="toggle_visibility('first_product')" value=" + ADD"> 

            </form>


        </div>