Pagina 1 di 1
Javascript funzione "onclick"
Inviato: giovedì 4 giugno 2015, 15:29
da batello
Salve, ho una necessità nel fare un sito web.
In questa pagina ci sono tre box con un testo e sotto un link " + scopri di più". Al click di questo link, si apre una tendina con delle info e il " + " diventa " - ". Quando poi clicco nuovamente sul link la tendina si chiude e il "-" torna a essere "+".
Per fare questa cosa ho semplicemente creato una classe e, tramite CSS, ho inserito il "+" con un before. Tramite javascript ho scritto questa funzione che mi cambia il nome alla classe di partenza e, sempre tramite css, ho definito un before che mi metta il "-" anziché il "+".
La funzione javascript è questa:
Codice: Seleziona tutto
<script>
$(document).ready(function(){
$("#mercatiDropdown a.link_contatti").on('click',function(){
if($(this).hasClass("link_contatti")){
$(this).removeClass("link_contatti").addClass("link_contattiAfterClick");
}else{
$(this).removeClass("link_contattiAfterClick").addClass("link_contatti");
}
});
});
</script>
Questa funzione va che è una meraviglia ma non prevede una cosa:
come dicevo i box con i link " + scopri di più" sono tre, uno accanto all'altro.
Se io mi trovo nel box A e clicco su " + scopri di più", si apre la tendina e il "+" si trasforma in "-". Se però invece di ricliccare sul link clicco su " + scopri di più" del box B. Si chiude la tendina di A, si apre quella di B e il suo "+" si trasforma in "-" però il "-" di A non torna a essere un "+".
Insomma, so di essermi spiegato uno schifo ma spero sia chiaro lo stesso.
Re: Javascript funzione "onclick"
Inviato: giovedì 4 giugno 2015, 15:33
da Zoff
Ine ffetti non è chiaro.
Puoi postare il codice html incriminato?
Re: Javascript funzione "onclick"
Inviato: giovedì 4 giugno 2015, 16:30
da batello
Questo è l'html
Codice: Seleziona tutto
<div class="col-xs-4 dropdown yamm-fw">
<h2>FINANZIAMENTI</h2>
<hr />
<!--<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>-->
<a id="dettagliContatti" href="#" class="link_contatti" data-toggle="dropdown">I nostri contatti</a>
<div class="dropdown-menu" >
<div class="col-xs-12">
<p class="paragraphL text-center">
Alcune info
</p>
</div>
</div>
</div>
<div class="col-xs-4 dropdown yamm-fw">
<h2>LEASING</h2>
<hr />
<!--<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>-->
<a href="#" class="link_contatti" data-toggle="dropdown">I nostri contatti</a>
<div class="dropdown-menu" >
<div class="col-xs-12">
<p class="paragraphL text-center">
Alcune info
</p>
</div>
</div>
</div>
<div class="col-xs-4 dropdown yamm-fw">
<h2>FACTORING</h2>
<hr />
<!--<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>-->
<a href="#" class="link_contatti" data-toggle="dropdown">I nostri contatti</a>
<div class="dropdown-menu" >
<div class="col-xs-12">
<p class="paragraphL text-center">
Alcune info
</p>
</div>
</div>
</div>
Questo è il link con il "+" davanti
Codice: Seleziona tutto
<a href="#" class="link_contatti" data-toggle="dropdown">I nostri contatti</a>
.
Il + viene creato attraverso questo css
Codice: Seleziona tutto
#mercatiDropdown a.link_contatti:before{
content:"+";
display:inline-block;
background:#000;
color:#fff;
border-radius:10px;
width:20px;
height:20px;
text-align:center;
margin-right:10px;
}
e il javascript è quello di sopra
Re: Javascript funzione "onclick"
Inviato: giovedì 4 giugno 2015, 16:49
da Zoff
Quindi il "box A" dell'esempio sarebbe FINANZIAMENTI e il "box B" LEASING?
Non mi è chiaro cosa sia " + scopri di più"
Re: Javascript funzione "onclick"
Inviato: giovedì 4 giugno 2015, 21:59
da SuperStep
dovresti salvarti in una variabile il "+ attivo", quando premi un elemento diverso da "+ attivo" quell'elemento torna ad essere come in oartenza.
(oppure semplicemente con brute force metti tutti gli elementi chiusi e poi rimetti quello premuto attivo).
Re: Javascript funzione "onclick"
Inviato: domenica 7 giugno 2015, 22:50
da eaghezzi
il problema è che il css viene applicato a tutti gli elementi
o fai una classe per ogni singolo elemento ed applichi quella al solo elemento $(this)...
o più elegantemente fai tutto via script
Re: Javascript funzione "onclick"
Inviato: lunedì 8 giugno 2015, 4:25
da SuperStep
comunque dovrebbe essere piu' una cosa del genere:
Codice: Seleziona tutto
$("#mercatiDropdown a.link_contatti").on('click',function(event){
if($(this).hasClass("link_contatti")){
$(event.target).removeClass("link_contatti").addClass("link_contattiAfterClick");
}else{
$(this).removeClass("link_contattiAfterClick").addClass("link_contatti");
}
});
Re: Javascript funzione "onclick"
Inviato: lunedì 8 giugno 2015, 11:26
da batello
Ho provato a sostituire il mio codice con questo ma purtroppo non funziona. Si comporta esattamente come il mio
Re: Javascript funzione "onclick"
Inviato: lunedì 8 giugno 2015, 11:28
da batello
Il "+ scopri di più" sarebbe "+ I nostri contatti"... avevo sbagliato a scrivere nel primo post
Re: Javascript funzione "onclick"
Inviato: lunedì 8 giugno 2015, 11:32
da batello
Purtroppo non posso fare una classe per ogni singolo elemento perché il codice HTML che vi ho postato prima è una "versione semplificata" che però andremo a rendere più complessa in quanto i contenuti potranno cambiare quindi verrà creato un foreach che varia in base a quello che verrà inserito dal cliente.
Per quanto riguarda il "...o più elegantemente fai tutto via script" è quello che vorrei fare ma non so bene come. Non sono molto esperto di javascript; lo sto imparando in questi giorni per il lavoro
Re: Javascript funzione "onclick"
Inviato: martedì 9 giugno 2015, 0:37
da Zoff
In realtà è il comportamento predefinito di bootstrap, basta togliere data-toggle="dropdown" e aggiungere il toggle al click:
Codice: Seleziona tutto
$(document).ready(function(){
$("#mercatiDropdown a.link_contatti").on('click',function(){
$(this).dropdown('toggle');
if($(this).hasClass("link_contatti")){
$(this).removeClass("link_contatti").addClass("link_contattiAfterClick");
}else{
$(this).removeClass("link_contattiAfterClick").addClass("link_contatti");
}
});
});