acordeão jQuery: links não funcionam
https://stackoverflow.com/questions/332384
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Estou trabalhando em uma página usando o jQuery's Elemento da interface do usuário do acordeão. Eu modelei meu html nesse exemplo, exceto que dentro do <li> Elementos, tenho algumas listas não ordenadas de links. Assim:
$(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: os links não funcionam
Em todos os navegadores que testei, os links naqueles menus de acordeão causam a seção de acordeão para colapso Em vez de levá -lo para a página vinculada. (Ainda posso clicar com o botão direito do mouse e ir para o site vinculado.)
Isso poderia ser algum tipo de problema de encadernação de cliques?
Solução
Por padrão, o Widget Accordian define todos os links para os cabeçalhos. Para alterá -lo, você precisa especificar um seletor com o headers opção. Então, seu código ficaria assim:
$(".ui-accordion-container").accordion(
{ active: "a.default", ..., header: "a.accordion-label" }
);
Outras dicas
Tente adicionar um onlick inline que impeça o Event Bubbling:
...
<a href='#' onclick="event.stopPropagation()" class="accordion-label">A Group of Links</a>
...
Ou um evento Domready como assim:
$(".toggle-title a").click(function(event){ event.stopPropagation()})
No entanto, o último não funcionou para mim, mesmo que o código faça sentido, o jQuery executa o clique! Qualquer pessoa que possa explicar que, para mim, sinta -se livre, eu venho do fundo do MooTools e do Google, que tem funções adicionais.
Eu tinha exatamente o mesmo problema e não consegui encontrar uma resposta em nenhum lugar. De fato, algumas fontes disseram que isso simplesmente não poderia ser feito.
Ao jogar mais, encontrei uma solução de trabalho. Pode não ser ótimo, mas funciona como um encanto.
Primeiro, apenas verifique se os links que você deseja clicar e imune aos controles de acordeão é facilmente identificável. Eu tive uma aula na minha.
$('.stats a').click(function(){
expander.accordion('disable');
window.open($(this).attr('href'));
setTimeout ( function() {
expander.accordion('enable');
}, 250 );
});
Essencialmente, isso ouve quando um link dentro do cabeçalho do acordeão é clicado. Quando é, o acordeão está temporariamente desativado, impedindo que o disparo normalmente. O link é então aberto, neste caso, em uma nova janela, mas você pode usar o documento.location também
Se reativarmos o acordeão imediatamente, ele ainda disparará e alternará o acordeão. Descobri que um tempo de limite super curto proporciona atraso suficiente.
Espero que isso ajude alguém!
Aqui está uma solução realmente simples
http://www.designerstalk.com/forums/help-mem/41297-jquery-acordion-embedding-links-help needed.html
Sempre copia deve ser verdadeira.
Pode ser que minha sugestão não esteja usando a função acordeion (), [que eu não conhecia antes, obrigado por trazê -lo :)], mas ainda mostre como ter um elemento da interface do usuário de acordeão.
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>
Espero que isto ajude.
Aqui está um possível script alternativo para quem ainda está enfrentando esse problema:http://twostepmedia.co.uk/notes/development/jquery-acordion/
Como minha resposta para sua outra pergunta diz:
navigation: true
Deve ser definido na sua lista de opções.
