ugrás a tartalomhoz

Body Eseménykezelés

Anonymus04 · 2017. Május. 23. (K), 18.30
Sziasztok! Az előző fórumtémában szereplő kódot próbálgatom kicsit továbbfejleszteni. Azt szeretném megoldani, hogy ha a user a 'lenyíló div'-eken kívül kattint bárhol, akkor az éppen megnyitott div is csukódjon be.
Próbáltam úgy megoldani átszerkesztve a JS scriptet, ha a body-n lefut az onclick esemény, akkor becsukódik az összes div, de ezzel az a gond, hogy mivel a div-ek is a bodyn belül vannak, így ha azokra kattintok automatikusan lefut a body onclick eseménye is: azaz megjelenik a szövegdoboz, de el is tűnik mivel a body eseménye is lefut.
Hogy lehetne ezt megoldani?

(Egyszerűen fogalmazva a user ugye nézegeti a tartalmakat, lenyit egyet, megnézi, lenyit egy másikat, előző eltűnik aktuális megjeleni, majd kattint egyet a tartalmi div-eken kívül [a bodyn] akkor az összes div becsukódna)

<?php
header('Content-Type:text/html; charset=utf-8');
?>
<!DOCTYPE html>
<html lang="hu">
  <head> 
     <meta charset="utf-8">
     <title></title>
     <script>
     var expandContent = (function (){  
  
    var expanded;

	function expandContent(id){   
        var el = document.getElementById(id);  
        if(el != null)
		{
			var needExpand = expanded !== el;
		}
		else
		{
			var needExpand = false;
		}
        if (expanded)  
            collapse();  
        if (needExpand)  
            expand(el);  
        return false;  
    }  
      
    function expand(el){  
        el.style.display = "block";  
        expanded = el;  
    }  
      
    function collapse() {  
        expanded.style.display = "none";  
        expanded = null;  
    }  
      
    return expandContent;  
})(); 
     </script>
  </head>
  <body onclick="return expandContent('')">
  <div id="akarmi" >MindentBezár</div>
		<!--[ CIKK CÍME 1]--->  
	<div onclick="return expandContent('szoveg1')" class="HirekFejlecDiv">  
		<img class="HirekFejlecIMG" src="img/img1.jpg" width="30px;" height="30px;"></img><!--kis nyíl kép-->
		<p class="HirekFejlecSzoveg">Címszó 1</p>  
	</div>  
	  
	<!--[ CIKK TARTALMI RÉSZE 1]-->  
	<div id="szoveg1" style="display:none" class="hirekShowDiv">  
		<div class="HirekLenyiloDiv">  
		Tartalom(1) kerül ide. Akár szöveg, adatbázisból, fájlból, képek vagy videók. Bármilyen HTML elemek! :D<br>  
		</div>  
	</div>  
	  
	<!-------------------------------------------------------->  
	  
	<!--[ CIKK CÍME 2]-->    
	<div onclick="return expandContent('szoveg2')" class="HirekFejlecDiv">  
		<img class="HirekFejlecIMG" src="img/img2.jpg" width="30px;" height="30px;"></img><!--kis nyíl kép-->
		<p class="HirekFejlecSzoveg">Címszó 2</p>  
	</div>  
	  
	<!--[ CIKK TARTALMI RÉSZE 2]-->  
	<div id="szoveg2" style="display:none" class="hirekShowDiv">  
		<div class="HirekLenyiloDiv" >  
		Tartalom(2) kerül ide. Akár szöveg, adatbázisból, fájlból, képek vagy videók. Bármilyen HTML elemek! :D<br>   
		</div>  
	</div>  
	  
	<!-------------------------------------------------------->  
	  
	<!--[ CIKK CÍME 3]-->    
	<div onclick="return expandContent('szoveg3')" class="HirekFejlecDiv">  
		<img class="HirekFejlecIMG" src="img/img3.jpg" width="30px;" height="30px;"></img><!--kis nyíl kép-->
		<p class="HirekFejlecSzoveg">Címszó 3</p>  
	</div>  
	  
	<!--[ CIKK TARTALMI RÉSZE  3]-->  
	<div id="szoveg3" style="display:none" class="hirekShowDiv">  
		<div class="HirekLenyiloDiv" >  
		Tartalom(3) kerül ide. Akár szöveg, adatbázisból, fájlból, képek vagy videók. Bármilyen HTML elemek! :D<br>  
		</div>  
	</div> 
  </body>
</html>  

body{
	margin: 0 auto;
    width: 50%;
}

.HirekFejlecDiv {  
    width: 80%;
    margin: 0 auto;
    height: 50px;  
    background-color: greenyellow;  
    border-spacing: 0px;  
    position: relative;  
    left: 3px;  
    margin-bottom: 2px;  
    cursor: pointer; /* az egér mutató kézzé alakuljon át ezen a felületen */  
}  
  
.HirekFejlecSzoveg {  
    text-align: center;   
    line-height: 50px;  
    color: #fffdd2;  
    text-shadow: 2px 2px 2px #000000;  
    font-size: 30px;
	font-weight: bolder;
}  
  
.HirekFejlecIMG {  
    position: absolute;
	width: 10%;
    height: 100%;    
}  
  
.HirekLenyiloDiv {
	background-color: #ffffe4;
    border: 2px;
    text-align: center;
    border-style: solid;
    overflow-x: hidden;
    position: relative;
	margin: 0px auto;
    width: 98%;
    padding: 3px;
    left: 3px;
}

.hirekShowDiv{
	width: 80%;
    margin: 0 auto;
}
 
1

Hibakeresés

Hidvégi Gábor · 2017. Május. 23. (K), 19.31
Ajánlom figyelmedbe az Egyszerű hibakeresés című cikket, annak a segítségével meg fogod tudni oldani a problémát.

A téma zárható.
2

Nem értem

smokey · 2017. Május. 24. (Sze), 09.27
Lehet, hogy megint OFF-ot generálok, nem célom, elnézést, de:
Itt egy szakmai fórum, Hetente beesik egy-egy új post, és egy mondattal le van zárva.

A már sokszor behivatkozott cikk tartalma nagyon hasznos. Jobb szeretem én is, ha valakit rávezetnek a probléma megoldására és nem megoldják helyette.

Szerintem egy szakmai közösségben, ahol nem pezseg az élet, nem érzem közösség építő jellegűnek az
A téma zárható.
comment zárást. Az én kedvem konkrétan elvette attól, hogy szakmailag hozzászolnék bármit is.
3

Helyes

Hidvégi Gábor · 2017. Május. 24. (Sze), 10.05
A következővel kezdtem öt éve a fentebb linkelt cikket: "A Weblaboron előforduló fórumtémák nagy többségénél az a probléma, hogy a szerző csak nemrég kezdett el ismerkedni a webfejlesztéssel, és nem tudja, milyen eszközök állnak rendelkezésre a hibák kiderítéséhez."

Szemmel láthatólag a helyzet nem változott, a mai kezdők ugyanezzel a problémával küszködnek, azaz a szakma ezen a területen egy jottányit sem fejlődött. Az internet decentralizáltsága itt épp hátrány, mert egy kezdőnek elképzelése sincs, hogy hol induljon el, ha érdekli a dolog.

Minden tudománynak vannak alapjai, de ha mondjuk írni szeretnél, szerencséd van, mert az iskolában első osztályban megtanítják, és onnantól kezdve már nem kell vele foglalkoznod. Vagy veled fordult elő, hogy mondjuk harmadikban visszamentél a tanítónénihez, hogy hogyan is kell az Á betűt írni? Mert a fenti kérdés nagyjából ehhez hasonló.

Milyen szakmai jellegű hozzászólást szerettél volna elkövetni? Milyen vitára van lehetőség, ha a szerző szemmel láthatólag az alapokkal nincs tisztában? Mi hogyan működik, mit csinál a böngésző, ha kattintgatok, mi az esemény, mi azoknak a sorrendje stb.?

Természetesen ezekre fel lehet hívni a figyelmét – node minek? Leíhatod, hogy hogyan célszerű elkészíteni a programot – de ezt már megtették mások, akár részletesebben is, ezer helyen. Persze megteheted ugyanezt ezeregyedszer, de az a közösséget építi? Előre visz?

Ha nem tudod leírni az F betűt, akkor veled le fog bárki is állni vitázni? Vagy visszaküld az első osztályba?

Nem látom az alapvető kérdések közösségépítő erejét. Annak már inkább, hogy építsünk egy bázist vagy linkgyűjteményt, ahonnan egy helyről össze lehet szedni ezeket az információkat. Ez már érdekes lehet, és hasznos mindenki számára.

Hogyan gondolkodik manapság egy kezdő? Milyen kérdései vannak a szakmával kapcsolatban? Mi az, amire nincs rálátása? Mik a céljai? Mik a hasznos és mik a felesleges információk? Ezek érdekes kérdések és megvitatni valók, ahol mindenki, kezdők és profik egyaránt, hozzáteheti a magáét. Ez tud közösséget építeni.
4

Maximálisan egyet értek.

smokey · 2017. Május. 24. (Sze), 11.43
Maximálisan egyet értek. Tisztában kell lenni az alapokkal, anélkül semmire nem megy senki semmilyen témában. Én csak arra próbáltam reflektálni a fenti hozzászólásomban, hogy ez a téma csírájában el lett folytva.

Az viszont tényleg nem mindegy, hogy valaki azt kérdezi, hogy "Hogyan írjam az F betűt", vagy azt, hogy "Ti hogyan írjátok az F betűt"
5

Persze

Hidvégi Gábor · 2017. Május. 24. (Sze), 12.12
Az első hozzászólásomban leírtam minden szükséges információt, ami a feladat megoldásához kell, ezen felül minden más csak szócséplés:

A feladat meg lett oldva.

Q.E.D.

---

A felvetésedre: amiről itt vitatkozni lehetne, hogy ha lenne kész megoldása, akkor rákérdez, hogy ez jó-e, hogyan lehet optimalizálni, egyszerűsíteni. De erről itt szó sincs, mert a feladat nincs befejezve.
6

Megoldva

Anonymus04 · 2017. Május. 25. (Cs), 07.24
Hiába használtam a debuggert, láttam sorról sorra, hogy hol mi történik, nem azzal volt baj. Aki veszi a fáradtságot és érdekli olvassa el a Bubbling cikket. Szépen le van írva, hogyan oldható meg, hogy a body egy gyermekére kattintva a body onclick eseménye ne fusson le!