DOM és style.display

bsanyi · 2006. Júl. 11. (K), 12.51

Üdv Mindenkinek,

olyan kérdésem lenne, hogy van egy treeview kezdeményem, amely ul /li -ből épül fel és szeretném az egyes elemek esetében az li-ben található első ul-t eltűntetni?

Próbálkoztam DOM-mal, de nem igazán sikerült:
Javascript:

<script language="Javascript">
function expand(value) {
var currentItem = value;
for (var i=0; i<currentItem.childNodes.length; i++) {
if (currentItem.childNodes[i].nodeName == 'UL') {
//alert(currentItem.childNodes[i].style.display);
if (currentItem.childNodes[i].style.display == 'block') {
currentItem.childNodes[i].style.display = '';
} else {
currentItem.childNodes[i].style.display = 'block';
}
}
//alert(currentItem.childNodes[i].nodeName);
}
}
</script>


<script language="Javascript">
		function expand(value) {
			var currentItem = value;
			for (var i=0; i<currentItem.childNodes.length; i++) {
				if (currentItem.childNodes[i].nodeName == 'UL') {
					//alert(currentItem.childNodes[i].style.display);
					if (currentItem.childNodes[i].style.display == 'block') {
						currentItem.childNodes[i].style.display = '';
					} else {
						currentItem.childNodes[i].style.display = 'block';
					}
				}
				//alert(currentItem.childNodes[i].nodeName);
			}
		}
</script>

<body>
<ul class="tv_container">
<li class="tv_item_open_exp" onclick="expand(this)"><div class="text_middle_open">Első elem</div>
<ul class="tv_container tv_container_inner">
<li class="tv_item_open_exp" onclick="expand(this)"><div class="text_middle_open">Második elem</div>
<ul class="tv_container tv_container_inner">
<li class="tv_item">Második elem</li>
<li class="tv_item">Második elem</li>
<li class="tv_item">Második elem</li>
<li class="tv_item">Második elem</li>
</ul>
</li>
<li class="tv_item_close_exp" onclick="expand(this)"><div class="text_middle_close">Második elem</div>
<ul class="tv_container tv_container_inner">
<li class="tv_item">Istentelen</li>
</ul>
</li>
</ul>
</li>
<li class="tv_item_close_exp" onclick="expand(this)"><div class="text_middle_open">Harmadik elem</div>
<ul class="tv_container tv_container_inner">
<li class="tv_item">Negyedik elem</li>
</ul>
</li>
</ul>
</body>


	<body>
		<ul class="tv_container">
			<li class="tv_item_open_exp" onclick="expand(this)"><div class="text_middle_open">Első elem</div>
				<ul class="tv_container tv_container_inner">
					<li class="tv_item_open_exp" onclick="expand(this)"><div class="text_middle_open">Második elem</div>
						<ul class="tv_container tv_container_inner">
							<li class="tv_item">Második elem</li>
							<li class="tv_item">Második elem</li>
							<li class="tv_item">Második elem</li>
							<li class="tv_item">Második elem</li>
						</ul>
					</li>
					<li class="tv_item_close_exp" onclick="expand(this)"><div class="text_middle_close">Második elem</div>
						<ul class="tv_container tv_container_inner">
							<li class="tv_item">Istentelen</li>
						</ul>
					</li>
				</ul>
			</li>
			<li class="tv_item_close_exp" onclick="expand(this)"><div class="text_middle_open">Harmadik elem</div>
				<ul class="tv_container tv_container_inner">
					<li class="tv_item">Negyedik elem</li>
				</ul>
			</li>
		</ul>
	</body>

Nem igazán tudom hol rontom el, esetleg valami segítséget tudtok adni?

Kösz
bsanyi

■

HTML, CSS, JavaScript, Ajax

csirip

css lemaradt

bsanyi · 2006. Júl. 11. (K), 13.00

.tv_container {
padding: 0px;
margin: 0px;
background-image: url(../IMG/container_left.gif);
background-repeat: repeat-y;
background-position: left;
background-color: White;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
display: block;
}
.tv_container_inner {
margin-left: 15px;
}
.tv_item {
list-style-type: none;
margin-left: 7px;
padding-left: 10px;
line-height: 13px;
background-image: url(../IMG/hr_line.gif);
background-repeat: no-repeat;
background-position: left;
}
.tv_item_open_exp {
list-style-type: none;
line-height: 14px;
}
.tv_item_close_exp {
list-style-type: none;
line-height: 14px;
}
.tv_item_open_exp_img {
border: 0px;
}
.text_middle_open {
background-image: url(../IMG/open_exp.gif);
padding-left: 16px;
display: inline;
position: relative;
background-position: top left;
background-repeat: no-repeat;
}
.text_middle_close {
background-image: url(../IMG/close_exp.gif);
padding-left: 16px;
display: inline;
position: relative;
background-position: top left;
background-repeat: no-repeat;
}


.tv_container {
	padding: 0px;
	margin: 0px;
	background-image: url(../IMG/container_left.gif);
	background-repeat: repeat-y;
	background-position: left;
	background-color: White;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	display: block;
}

.tv_container_inner {
	margin-left: 15px;
}

.tv_item {
	list-style-type: none;
	margin-left: 7px;
	padding-left: 10px;
	line-height: 13px;
	background-image: url(../IMG/hr_line.gif);
	background-repeat: no-repeat;
	background-position: left;
}

.tv_item_open_exp {
	list-style-type: none;
	line-height: 14px;
}

.tv_item_close_exp {
	list-style-type: none;
	line-height: 14px;
}

.tv_item_open_exp_img {
	border: 0px;
}
.text_middle_open {
	background-image: url(../IMG/open_exp.gif);
	padding-left: 16px;
	display: inline;
	position: relative;
	background-position: top left;
	background-repeat: no-repeat;
}
.text_middle_close {
	background-image: url(../IMG/close_exp.gif);
	padding-left: 16px;
	display: inline;
	position: relative;
	background-position: top left;
	background-repeat: no-repeat;
}

A hozzászóláshoz regisztráció és belépés szükséges
új téma

re

toxin · 2006. Júl. 11. (K), 13.39

<script language="Javascript">
function expand(elem) {
var elems = elem.getElementsByTagName('ul')
elems[0].style.display = (typeof(elems[0].style.display) == "undefined" || elems[0].style.display == 'none' )?'block':'none';
}
</script>


<script language="Javascript">
function expand(elem) {
    var elems = elem.getElementsByTagName('ul')
    elems[0].style.display =  (typeof(elems[0].style.display) == "undefined" || elems[0].style.display == 'none' )?'block':'none';
}
</script>

üdv t

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Bubbling

rpspace · 2006. Júl. 11. (K), 14.20

Először is kell egy
currentItem.childNodes[i].style.display = 'none';
Majd utána az esemény bubbling miatt meg kell akadályozni, hogy a a click továbbítódjon a szűlőobjektumoknak:

1. A script:

<script language="Javascript">
function expand(value,e) {
var currentItem = value;
for (var i=0; i<currentItem.childNodes.length; i++) {
if (currentItem.childNodes[i].nodeName == 'UL') {
//alert(currentItem.childNodes[i].style.display);
if (currentItem.childNodes[i].style.display != 'none') {
currentItem.childNodes[i].style.display = 'none';
} else {
currentItem.childNodes[i].style.display = 'block';
}
}
//alert(currentItem.childNodes[i].nodeName);
}
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
</script>


<script language="Javascript">
        function expand(value,e) {
            var currentItem = value;
            for (var i=0; i<currentItem.childNodes.length; i++) {
                if (currentItem.childNodes[i].nodeName == 'UL') {
                    //alert(currentItem.childNodes[i].style.display);
                    if (currentItem.childNodes[i].style.display != 'none') {
                        currentItem.childNodes[i].style.display = 'none';
                    } else {
                        currentItem.childNodes[i].style.display = 'block';
                    }
                }
                //alert(currentItem.childNodes[i].nodeName);
            }

			if (!e) var e = window.event;
			e.cancelBubble = true;
			if (e.stopPropagation) e.stopPropagation();

	}
</script>

vagy toXin által beküldött kód kiegészítve a bubbling gátlással:

<script language="Javascript">
function expand(elem,e) {
var elems = elem.getElementsByTagName('ul')
elems[0].style.display = (typeof(elems[0].style.display) == "undefined" || elems[0].style.display == 'none' )?'block':'none';
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
</script>


<script language="Javascript">
  function expand(elem,e) {
    var elems = elem.getElementsByTagName('ul')
	elems[0].style.display =  (typeof(elems[0].style.display) == "undefined" || elems[0].style.display == 'none' )?'block':'none';

	if (!e) var e = window.event;
	e.cancelBubble = true;
	if (e.stopPropagation) e.stopPropagation();
	}
</script>

1. utána mindenhol a html-ben:
onclick="expand(this,event)" //itt a plusz a ",event"

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Köszönöm

bsanyi · 2006. Júl. 11. (K), 14.59

köszönöm a válaszodat, a stoppropagationra már magam is rájöttem és számoltam is vele, ezért be is építettem miután kipróbáltam a válaszban érkezett kódot.

A végeredmény egy kicsit más lett, mert osztályt is kellett változtatnom, de azt hiszem, most megint tanultam egy csomót.

Igen ez a != és == összahasonlító operátorok sokx megszivatnak engem, ideje lenne megtanulni rendesen használni őket :-)

Üdv
bsanyi

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés