Question

我有一些动态附加到不同div的下拉菜单。问题是，当有人点击“关闭”时，style.display = "none"将不起作用。我可以改变背景，不透明度，大小，但我不能隐藏它。

代码如下所示：

    <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

非常感谢任何建议！

Answer 1

您正在将元素移动到单击的元素中。

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

首先执行菜单项的单击处理程序，将display属性设置为none，并且当click事件冒泡时，执行包装元素的事件处理程序并设置display属性block。

您应该使用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";
        // ...
    }
}

如何在追加到另一个之后隐藏div？

1 个答案: