Аккордеон jQuery:ссылки не работают
https://stackoverflow.com/questions/332384
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я работаю над страницей, используя jQuery элемент пользовательского интерфейса accordion.Я смоделировал свой HTML-код на этом примере, за исключением того, что внутри <li> элементы, у меня есть несколько неупорядоченных списков ссылок.Вот так:
$(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 -->
Проблема:Ссылки не работают
Во всех браузерах, которые я тестировал, ссылки в этих меню accordion вызывают секция аккордеона должна свернуться вместо того, чтобы перенаправлять вас на страницу, на которую дана ссылка.(Я все еще могу щелкнуть правой кнопкой мыши и перейти на связанный сайт.)
Может ли это быть какой-то проблемой с привязкой клика?
Решение
По умолчанию виджет аккордов устанавливает все ссылки на заголовки. Чтобы изменить его, вам нужно указать селектор с параметром headers. Итак, ваш код будет выглядеть так:
$(".ui-accordion-container").accordion(
{ active: "a.default", ..., header: "a.accordion-label" }
);
Другие советы
Попробуйте добавить встроенный onlick, который предотвращает всплытие событий:
...
<a href='#' onclick="event.stopPropagation()" class="accordion-label">A Group of Links</a>
...
Или событие domready, подобное этому:
$(".toggle-title a").click(function(event){ event.stopPropagation()})
Однако последнее не сработало для меня, хотя в коде есть смысл, jQuery выполняет щелчок! Любой, кто может объяснить, что для меня не стесняйтесь, я из MooTools и фона Google Closure, который имеет функции addEvent.
У меня была точно такая же проблема, и я нигде не мог найти ответа.На самом деле, пара источников сказали, что это просто невозможно сделать.
Продолжив играть, я действительно нашел рабочее решение.Может быть, это и не очень здорово, но работает как по волшебству.
Во-первых, просто убедитесь, что ссылки, которые вы хотите сделать кликабельными и невосприимчивыми к элементам управления accordion, легко идентифицируются.У меня был урок по моему.
$('.stats a').click(function(){
expander.accordion('disable');
window.open($(this).attr('href'));
setTimeout ( function() {
expander.accordion('enable');
}, 250 );
});
По сути, это отслеживает, когда нажимается ссылка внутри заголовка accordion.Когда это происходит, аккордеон временно отключается, не позволяя ему работать в обычном режиме.Затем ссылка открывается, в данном случае, в новом окне, но вы также можете использовать document.location
Если мы немедленно снова включим аккордеон, он по-прежнему будет срабатывать и переключать аккордеон.Я обнаружил, что сверхкороткий тайм-аут обеспечивает достаточную задержку.
Надеюсь, это кому-то поможет!
вот действительно простое решение
AlwaysOpen должно быть истинным.
Возможно, мое предложение не использовать функцию accordion (), [о которой я раньше не знал, спасибо, что подняли ее :)] но все же покажите, как иметь элемент пользовательского интерфейса Accordion.
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>
Надеюсь, это поможет.
Вот возможный альтернативный скрипт для тех, кто все еще сталкивается с этой проблемой: http://twostepmedia.co.uk/notes/development/jquery-accordion/
Поскольку мой ответ на ваш другой вопрос говорит:
navigation: true
Должен быть установлен в вашем списке опций.
