Body Eseménykezelés
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)
■ 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;
}
Hibakeresés
A téma zárható.
Nem értem
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
Helyes
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.
Maximálisan egyet értek.
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"
Persze
- Leírom a cikkben, hogy tessék megtanulni angolul
- Leírom, hogy jóbarátunk a kereső
- Ezek hatására rákeres a böngészők eseménykezelésére
- Az első találatot elolvassa, nem tökéletes, de jó kiindulási alap
- A függvényeibe beleteszi a
- A megfelelő helyen leállítja a megfelelő esemény tovaterjedését
A feladat meg lett oldva.console.log()hívását, és rájön, mi milyen sorrendben követi egymástQ.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.
Megoldva