Как скрыть div после добавления к другому?

У меня есть какое-то выпадающее меню, динамически добавляемое в divs divents. Проблема в том, что когда кто-то нажимает «закрыть», тогда style.display = "none" не будет работать. Я могу изменить фон, непрозрачность, размер, но я не могу его скрыть.Как скрыть div после добавления к другому?

код выглядит следующим образом:

<style> 
     html, body{ 
      height: 98%; 
     } 
     #editorViewport{ 
      width: 90%; 
      height: 100%; 
      min-width: 400px; 
      min-height: 300px; 
      position: relative; 
      margin: 0 auto; 
      border: 1px solid red; 
     } 
     #movingElementsContainer{ 
      display: none; 
      top: 0px; 
      left: 0px; 
     } 
     #addStartingElementBtn{ 
      width: 60px; 
      height: 60px; 
      margin: auto; 
      position: absolute; 
      top: 0; left: 0; bottom: 0; right: 0; 
     } 
     #addStartingElementBtn:hover{ 
      background-color: #c9eac6; 
      border: 1px solid grey; 
      cursor: pointer; 
     } 
     #elementsMenuContainer{ 
      width: 150px; 
      border: 1px solid grey; 
      background-color: white; 
      min-height: 100px; 
      padding: 5px; 
      position: absolute; 
      z-index: 2; 
      display: none; 
     } 
     .elementOption{ 
      width: 90%; 
      padding: 5px; 
      border: 1px solid grey; 
     } 
     .elementOption:hover{ 
      border: 1px solid red; 
      cursor: pointer; 
     } 
    </style> 

<body> 
    <div id="editorViewport"> 

     <div id="addStartingElementBtn" data-Owner="starting" data-Side="starting" class="openElementsMenu"> 
      Click! 
     </div> 
    </div> 
    <div id="movingElementsContainer"> 
     <div id="elementsMenuContainer" data-Open="false" data-Owner="" data-Side=""> 
      <div data-Kind="1" class="elementOption"> 
       One 
      </div> 
      <div data-Kind="2" class="elementOption"> 
       Two 
      </div> 
      <div data-Kind="3" class="elementOption"> 
       Three 
      </div> 
      <div data-Kind="99" class="elementOption"> 
       Close 
      </div> 
     </div> 
    </div> 
</body> 
<script type="text/javascript"> 

    function prepareEventHandlers(){ 
     var openElementsMenu = document.getElementsByClassName("openElementsMenu"); 
     var event = window.attachEvent ? 'onclick' : 'click'; 
     for(var i = 0; i < openElementsMenu.length; i++){ 
      if(openElementsMenu[i].addEventListener){ 
       openElementsMenu[i].addEventListener('click', elementsMenu, false); 
      }else{ 
       openElementsMenu[i].attachEvent('onclick', elementsMenu); 
      } 
     } 
     var elementOption = document.getElementsByClassName("elementOption"); 
     for(var i = 0; i < elementOption.length; i++){ 
      if(elementOption[i].addEventListener){ 
       elementOption[i].addEventListener('click', selectElementToCreate, false); 
      }else{ 
       elementOption[i].attachEvent('onclick', selectElementToCreate); 
      } 
     } 
    } 
    window.onload = function(){ 
     prepareEventHandlers(); 
    } 

    var totalElements = 0; 
    var editorViewport = "editorViewport"; 
    var selectedElementId = ""; 

    var elementsMenu = function(){ 
     var elementsMenu = document.getElementById("elementsMenuContainer") 
     this.appendChild(elementsMenu); 
     elementsMenu.style.display = "block"; 
     elementsMenu.style.left = 61 + "px"; 
     elementsMenu.style.top = "0px"; 
     elementsMenu.setAttribute("data-Open", "true"); 
     elementsMenu.setAttribute("data-Owner", this.getAttribute("data-Owner")); 
     elementsMenu.setAttribute("data-Side", this.getAttribute("data-Side")); 
    } 
    var selectElementToCreate = function(){ 
     var dataKind = this.getAttribute('data-Kind'); 
     var parentNode = document.getElementById(this.parentNode.id); 

     alert(dataKind) 
     if(dataKind == "99"){ 
      parentNode.style.display = "none" 
      parentNode.setAttribute("data-Open", "false"); 
      parentNode.setAttribute("data-Owner", ""); 
      parentNode.setAttribute("data-Side", ""); 
     } 
    } 
</script>

Вот такой JSFiddle

Большое спасибо за любую посоветуйте!

источник

2015-04-29 Shagohad

Фактически, ваше меню закрывается один раз, но функция 'open' запускается снова, когда пользователь нажимает на' close'. –

Да, я тоже это заметил, но, честно говоря, я понятия не имею, почему это происходит. – Shagohad

  var selectElementToCreate = function(e){ 
      var dataKind = this.getAttribute('data-Kind'); 
      var parentNode = document.getElementById(this.parentNode.id); 

      alert(dataKind) 
      if(dataKind == "99"){ 
       console.log(parentNode); 
       parentNode.style.display = "none" 
       parentNode.setAttribute("data-Open", "false"); 
       parentNode.setAttribute("data-Owner", ""); 
       parentNode.setAttribute("data-Side", ""); 
       alert("Wont Close :"); 
      } 
      e.stopPropagation(); 
     }

источник

2015-04-29 11:24:40 Anatoli

Спасибо, отлично работает !. Мог бы объяснить мне, что делает остановка? – Shagohad

StopPropagation предотвращает дальнейшее распространение текущего события. Проверьте свой дом, и вы увидите, что у вас есть кнопка Click и внутри есть пункты меню. Если вы нажмете на элемент без stopPropagation, ваша кнопка также обработает это действие. – Anatoli

Спасибо за исследование. Теперь я знаю, что я сделал неправильно. – Shagohad

Вы перемещаете элемент в элемент с щелчком.

var elementsMenu = document.getElementById("elementsMenuContainer") 
    this.appendChild(elementsMenu);

В первом обработчик щелчка пункта меню выполняется, которое устанавливает display свойства none и в пузырьках событий нажмите затем обработчик события элемента обертки выполняются и устанавливает displayblock свойства.

Вы должны прекратить распространение события с использованием метода stopPropagation объекта event.

var selectElementToCreate = function (event) { 
    event.stopPropagation(); 
    var dataKind = this.getAttribute('data-Kind'); 
    var parentNode = this.parentNode; 
    if (dataKind == "99") { 
     parentNode.style.display = "none"; 
     // ... 
    } 
}

источник

2015-04-29 11:31:18 undefined

Вы правы, теперь я знаю, что я сделал неправильно, и я буду иметь в виду. Благодаря! – Shagohad

@Shagohad Добро пожаловать! – undefined

Как скрыть div после добавления к другому?

ответ

Смежные вопросы