Переключить весь ДИВ не отвечает на запросы

Question

У меня есть кнопка, утверждают, что в настоящее время работает 2 функции, но позже на бегу 3.

1. Скрыть пункт по щелчку
2. OnClick сделать DIV в переключатель (Make себя в тумблера).
3. Вставьте данные в БД.

Я успешно выполнил задачу 1, я работаю над задачей 2, однако теперь, когда я добавил onclick на кнопку для задания 2, щелкните на странице, чтобы сделать ее белой, и все исчезнет.

Итак, мой вопрос в том, можно ли переключать весь 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, который удалял «Добавить ваш первый пункт меню» работал, пока я не добавил 2-й переключатель, это не возможно иметь более 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>