| Autor | Zpráva | ||
|---|---|---|---|
| nethor Profil |
#1 · Zasláno: 5. 9. 2014, 10:45:39
Zdravím,
mám dlouhý formulář, z toho důvodu chci momentálně nepoužívané položky zabalit. Používám JQuery. Clickem na ".BlockEditBoxHead" se rozbaluje / zabaluje následující ".BlockEditBoxBody". Navíc je v ".BlockEditBoxHead" checkbox, který řeší auto-rozbalování zatržených (Přidá ".Unwrap" pomocé PHP). Vše funguje až na jednu kosmetickou vadu: při clicku na label nebo checkbox se spustí akce zobal/zabal také, což je nežádoucí. Nejde $(".BlockEditBoxHead label") ze spouštění nějak vyloučit? Zdroj: ...
<div class="BlockEditBox">
<div class="BlockEditBoxHead">Nové foto:
<div class="Fright">
<label class="checkbox"><input class="checkbox" type="checkbox" value="1" name="Unwrap[ImgNewNet]">Rozbalit vždy</label>
</div>
</div>
<div class="BlockEditBoxBody">
<textarea class="textarea" rows="2" cols="90" name="ImgNewNet"></textarea>
</div>
</div>
....
JS:
$(".BlockEditBoxBody").hide() ;
$(".Unwrap").show(200) ;
$(".BlockEditBoxHead").click(function() {
$(this).next(".BlockEditBoxBody").toggle(200) ;
}); |
||
| Venca V Profil |
#2 · Zasláno: 5. 9. 2014, 10:52:22
$("div.BlockEditBoxHead").click(function() {
$(this).next(".BlockEditBoxBody").toggle(200) ;
}); |
||
| Joker Profil |
#3 · Zasláno: 5. 9. 2014, 11:03:08
nethor:
Stačí tu událost kliknutí pohltit dřív, než dorazí na ten element, který ji zpracovává. Tj. buď na tom <label>u, nebo na <div>u nad ním (podle toho, co všechno nemá na klik reagovat). |
||
| nethor Profil |
#4 · Zasláno: 5. 9. 2014, 11:08:47 · Upravil/a: nethor
Venca V:
To nic neřeší. label je vnořený do "div.BlockEditBoxHead", proto se akce spouští. Jde mi o to, jakým způsobem vyloučit ze spouštění label. Možná by to mohlo jít takhle nějak: $(".BlockEditBoxHead:not(.BlockEditBoxHead label)").click(function() {
$(this).next(".BlockEditBoxBody").toggle(200) ;
});$(".BlockEditBoxHead").not(".BlockEditBoxHead label").click(function() {
$(this).next(".BlockEditBoxBody").toggle(200) ;
});.. bohužel však nefunguje, spouští se stále. |
||
| RockFire Profil |
Jestli ti dobře rozumím, tak přidat:
$(".BlockEditBoxHead label").click(function(e) {
e.stopPropagation();
});Ukázka |
||
| Joker Profil |
#6 · Zasláno: 5. 9. 2014, 13:03:48
RockFire:
To jsem psal v [#3]. Jen pozor, že v IE je event.stopPropagation až od IE9. |
||
| RockFire Profil |
Joker:
Já byl raději konkrétnější, vypadá to, že stále tápal. Jinak dobrá připomínka, díky. |
||
| nethor Profil |
#8 · Zasláno: 5. 9. 2014, 13:08:32 · Upravil/a: nethor
RockFire:
Přesně! Děkuji. PS: Mezitím jsem to obešel vytvořením samostatného elementu pro click. <div class="BlockEditBoxHead">
<div class="Fright">
<label class="checkbox"><input class="checkbox" type="checkbox" value="1" name="Unwrap[ImgNewNet]">Rozbalit vždy</label>
</div>
<div class="Click">Nové foto:</div>
</div>
...
js:
$(".BlockEditBoxHead .Click").click(function() {
$(this).parent(".BlockEditBoxHead").next(".BlockEditBoxBody").toggle(200) ;
}); |
||
| Joker Profil |
#9 · Zasláno: 5. 9. 2014, 13:34:09
nethor:
„Mezitím jsem to obešel vytvořením samostatného elementu pro click.“ Není v tom případě snazší ten klik pověsit na BlockEditBoxBody? |
||
| nethor Profil |
#10 · Zasláno: 5. 9. 2014, 19:58:42
Joker:
To ne, BlockEditBoxBody je je ve výchozím stavu skrytý $(".BlockEditBoxBody").hide() ; #1 , takže by nešel rozkliknout.
Ve výchozím stavu se mají zobrazit pouze nadpisy/popisky BlockEditBoxHead a při clicku na ne se má zobrazit jejich ovládání, tj. BlockEditBoxBody . |
||
|
Časová prodleva: 10 let
|
|||
0