简体   繁体   中英

Showing hidden divs element using jQuery show() not working in IE7

I'm attempting to make a tree view using JavaScript. I have a list of Divs created dynamically. A parent node that is showing and a child node that will not be showing. When you hit the button on the parent node it will call show('slow'). This works on IE8 and IE9, but when I test it with IE7, the child node will show with out it's CSS class. How can I make this work with IE7?

code in the main page

function CreateEventCategoryDiv(EventCategoryName) {
            var NewEventCategoryNode = document.createElement('div');
            NewEventCategoryNode.id = EventCategoryName + "Node";
            if (TreeNodeCounter == 0 || (TreeNodeCounter % 2) == 0) {
                NewEventCategoryNode.className = "EventCategoryNodesEven";
            }
            else {
                NewEventCategoryNode.className = "EventCategoryNodesOdd";
            }
            NewEventCategoryNode.innerHTML = "<input type='button' value='+' id='ExpandButton' class='ExpandNodeButtons' onclick='ExpandNode(\"" + EventCategoryName + "\");' />&nbsp;" + EventCategoryName;
            var EventTree = document.getElementById("EventTree");
            EventTree.appendChild(NewEventCategoryNode);
            TreeNodeCounter++;
        }

     function ExpandNode(PassedNode) {
                var ParentNode = CalendarObject.SearchCategoryNode(PassedNode);
                if (ParentNode.IsChildrenShowing == false) {
                    ParentNode.ExpandNodes(CalendarObject.Months);
                }
                else if (ParentNode.IsChildrenShowing == true) {
                    ParentNode.CollapseNode(CalendarObject.Months);
                }
            }

This Part is called in the EventCategory Class to add the child nodes(sorry I forgot this one at first)

this.AddEventType = function (EventTypeNode) {
        var NewElement = document.createElement('Div');
        NewElement.id = EventTypeNode.DivAssociateId;
        NewElement.innerText = EventTypeNode.Name;
        if (this.NodesCount == 0 || (this.NodesCount % 2) == 0) {
            NewElement.setAttribute("class", "EventTypeNodesEven");
        }
        else {
            NewElement.setAttribute("class", "EventTypeNodesOdd");
        }
        NodesCount = this.EventTypeNodesArray.push(EventTypeNode);
        $(NewElement).hide();
        var ParentElement = document.getElementById("EventTree");
        ParentElement.appendChild(NewElement);
        this.NodesCount++;
    };

This Part is in the CalendarGrid class

this.ExpandNodes = function (MonthArray) {
        for (var x in this.EventTypeNodesArray) {
            var SelectedNode = document.getElementById(this.EventTypeNodesArray[x].DivAssociateId);
            if (this.IsChildrenShowing == false) {
                $(SelectedNode).show('slow');
                for (var y = 0; y < MonthArray.length; y++) {
                    var SelectedRow = document.getElementById(this.EventTypeNodesArray[x].Name + MonthArray[y].MonthName + "Row");
                    $(SelectedRow).show('slow');
                }
            }
        }
        this.IsChildrenShowing = true;
    };

CSS Code:

.EventTypeNodesOdd
{
    font-family:Arial;
    font-weight:bold;
    text-align:center;
    height:27px;
    background-color:#dbe2e6;
    display:block;
}

.EventTypeNodesEven
{
    font-family:Arial;
    font-weight:bold;
    text-align:center;
    height:27px;
    background-color:#f9fafb;
}

在显示该类后,尝试将其设置为任何类。

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM