Fisarmonica jQuery: i collegamenti non funzionano
https://stackoverflow.com/questions/332384
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Sto lavorando a una pagina usando elemento UI della fisarmonica di jQuery. Ho modellato il mio HTML su quell'esempio, tranne che all'interno degli elementi <li>, ho alcuni elenchi di collegamenti non ordinati. In questo modo:
$(document).ready(function() {
$(".ui-accordion-container").accordion(
{active: "a.default", alwaysOpen: true, autoHeight: false}
);
});
<ul class="ui-accordion-container">
<li> <!-- Start accordion section -->
<a href='#' class="accordion-label">A Group of Links</a>
<ul class="linklist">
<li><a href="http://example.com">Example Link</a></li>
<li><a href="http://example.com">Example Link</a></li>
</ul>
<!--and of course there's another group -->
Problema: i collegamenti non funzionano
In tutti i browser che ho testato, i collegamenti in quei menu a fisarmonica causano il crollo della sezione della fisarmonica invece di portarti alla pagina collegata. (Posso ancora fare clic con il pulsante destro del mouse e andare al sito collegato.)
Potrebbe trattarsi di un problema di associazione dei clic?
Soluzione
Per impostazione predefinita, il widget accordian imposta tutti i collegamenti alle intestazioni. Per modificarlo, è necessario specificare un selettore con l'opzione headers. Quindi, il tuo codice sarebbe simile al seguente:
$(".ui-accordion-container").accordion(
{ active: "a.default", ..., header: "a.accordion-label" }
);
Altri suggerimenti
Prova ad aggiungere un clic in linea che impedisce il gorgoglio degli eventi:
...
<a href='#' onclick="event.stopPropagation()" class="accordion-label">A Group of Links</a>
...
O un evento domready come questo:
$(".toggle-title a").click(function(event){ event.stopPropagation()})
Tuttavia, quest'ultimo non ha funzionato per me, anche se il codice ha senso, jQuery esegue il clic! Chiunque può spiegarmi che mi sento libero, vengo da MooTools e da Google Closure che ha funzioni addEvent.
Ho avuto lo stesso identico problema e non sono riuscito a trovare una risposta da nessuna parte. In effetti, un paio di fonti hanno detto che proprio non si poteva fare.
Dopo aver giocato ancora, ho trovato una soluzione funzionante. Potrebbe non essere eccezionale, ma funziona come un fascino.
Per prima cosa, assicurati solo che i link che desideri siano cliccabili e immuni ai controlli della fisarmonica siano facilmente identificabili. Ho tenuto una lezione sulla mia.
$('.stats a').click(function(){
expander.accordion('disable');
window.open($(this).attr('href'));
setTimeout ( function() {
expander.accordion('enable');
}, 250 );
});
In sostanza, questo è in ascolto per quando si fa clic su un collegamento all'interno dell'intestazione della fisarmonica. Quando lo è, la fisarmonica è temporaneamente disabilitata, impedendole di sparare normalmente. Il collegamento viene quindi aperto, in questo caso, in una nuova finestra ma è possibile utilizzare anche document.location
Se riabilitiamo immediatamente la fisarmonica, questa sparerà e attiverà la fisarmonica. Ho scoperto che un timeout super-breve fornisce abbastanza ritardo.
Spero che questo aiuti qualcuno!
ecco una soluzione davvero semplice
AlwaysOpen dovrebbe essere vero.
Potrebbe essere il mio suggerimento di non utilizzare la funzione fisarmonica (), [di cui non sapevo prima, grazie per averlo mostrato :)] ma che mostra comunque come avere un elemento dell'interfaccia utente della fisarmonica.
HTML
<body id="body">
<h2>Accordian</h2>
<div id="accordion" class="">
<div class="toggle_all">
<ul class="links">
<li><a class="openall" href="#"><span>Open All</span></a></li>
<li>|</li>
<li><a class="closeall" href="#"><span>Close All</span></a></li>
</ul>
</div>
<!-- toggleAll ends -->
<div class="accordion">
<div class="section_title_accordion design-gray">
<h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>
</div>
<!-- section_title_accordion ends -->
<div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>
<!-- accordion_content ends -->
</div>
<!-- accordion ends -->
<div class="accordion">
<div class="section_title_accordion design-gray">
<h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>
</div>
<!-- section_title_accordion ends -->
<div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>
<!-- accordion_content ends -->
</div>
<!-- accordion ends -->
<div class="accordion">
<div class="section_title_accordion design-gray">
<h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>
</div>
<!-- section_title_accordion ends -->
<div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>
<!-- accordion_content ends -->
</div>
<!-- accordion ends -->
</div>
<!-- #accordion ends -->
</body>
CSS
<style type="text/css" >
#body { margin-left:20%; font:12px verdana; }
.accordion { width:500px; }
h3 { margin:0; padding:0; }
.section_title_accordion { float:left; width:500px; margin:2px 0 0; }
.section_title_accordion h3 span { margin:0; float:left; color:#fff; padding:2px 0 3px 10px; }
.section_title_accordion a span { padding-left:20px; }
.accordion_content { border-bottom:1px solid #666666; border-left:1px solid #666666; border-right:1px solid #666666; float:left; padding:5px 3px; }
.accordion_content span.content { margin:5px 0 0; }
.design-gray { background:#003366; }
.design-gray a { color:#fff; float:left; width:100%; height:22px; background:#003366; text-decoration:none; }
.design-gray a:hover { text-decoration:underline;}
.on .design-gray a { color:#fff; float:left; width:100%; height:22px; background:#003366;}
.accordion_content_hover { background:#ffffcc; color:#000099; }
.toggle_all { padding:20px 0; width:500px; margin-bottom:5px; }
.toggle_all ul { padding:0; margin:0; }
.toggle_all ul li { list-style-type:none; }
.toggle_all .links li { float:left; padding-left:5px; }
.toggle_all .links li a, .toggleAll .links span { color:#666666; }
</style>
jQuery
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(".accordion_content").hide();
$("a.open").click(function() {
$(this).parents(".accordion").find(".accordion_content").toggle();
$(this).parents(".accordion").toggleClass('on');
return false;
});
$(".accordion_content").mouseover(function() {
$(this).addClass('accordion_content_hover');
return false;
});
$(".accordion_content").mouseout(function() {
$(this).removeClass('accordion_content_hover');
return false;
});
$("a.openall").click(function() {
$(".accordion_content").show();
$(this).parents("#accordion").find(".accordion").addClass('on');
return false;
});
$("a.closeall").click(function() {
$(".accordion_content").hide();
$(this).parents("#accordion").find(".accordion").removeClass('on');
return false;
});
});
</script>
Spero che questo aiuti.
Ecco un possibile script alternativo per chiunque abbia ancora questo problema: http://twostepmedia.co.uk/notes/development/jquery-accordion/
Come dice la mia risposta all'altra tua domanda:
navigation: true
Dovrebbe essere impostato nell'elenco delle opzioni.
