jQuery Akkordeon: Links funktionieren nicht
https://stackoverflow.com/questions/332384
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich arbeite an einer Seite mit jQuery Akkordeon UI-Element rel="nofollow. Ich modellierte meinen HTML an diesem Beispiel, mit der Ausnahme, dass in den <li> Elementen, ich habe einige ungeordneten Listen von Links. Wie folgt aus:
$(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 -->
Problem: Verknüpfungen funktionieren nicht
In allen Browsern ich getestet habe, die Links in diesem Akkordeon Menüs Ursache das Akkordeon Abschnitt Zusammenbruch , anstatt Sie auf die verlinkte Seite nehmen. (Ich kann immer noch rechtsklicken und auf den zu verlinkenden Seiten gehen.)
Könnte dies eine Art von Klick verbindlich Problem sein?
Lösung
Standardmäßig ist das accordian Widget setzt alle Links zu Header. Um es zu ändern, benötigen Sie einen Selektor mit der headers Option angeben. Also, Ihr Code würde wie folgt aussehen:
$(".ui-accordion-container").accordion(
{ active: "a.default", ..., header: "a.accordion-label" }
);
Andere Tipps
Versuchen Sie, eine Inline-Zugabe onlick dieses Ereignis sprudelnden verhindert:
...
<a href='#' onclick="event.stopPropagation()" class="accordion-label">A Group of Links</a>
...
Oder ein domready Ereignis wie folgt:
$(".toggle-title a").click(function(event){ event.stopPropagation()})
Allerdings hat dieser nicht für mich zu arbeiten, obwohl Code weise es Sinn macht, jQuery führt den Klick! Jeder, das mir das Gefühl, frei zu erklären, ich komme aus MooTools und Google Closure Hintergrund der Funktionen addEvent hat.
hatte ich genau dieses gleiche Problem und nicht eine Antwort finden wir überall. In der Tat, sagte ein paar Quellen könnte es einfach nicht getan werden.
Bei der weiteren Spiel, ich habe eine funktionierende Lösung finden. Kann nicht groß sein, aber es funktioniert wie ein Charme.
Zuerst nur sicherstellen, dass die Links Sie werden anklickbare möchten, und immun gegen die Akkordeon Kontrollen, ist leicht erkennbar. Ich hatte eine Klasse auf meinem.
$('.stats a').click(function(){
expander.accordion('disable');
window.open($(this).attr('href'));
setTimeout ( function() {
expander.accordion('enable');
}, 250 );
});
Im Wesentlichen das lauscht, wenn ein Link in dem Akkordeon-Header geklickt wird. Wenn ja, wird das Akkordeon vorübergehend deaktiviert, es von zu halten als normal zu feuern. Die Verbindung wird dann geöffnet, in diesem Fall in einem neuen Fenster, aber man könnte auch verwenden document.location
Wenn wir das Akkordeon sofort wieder freigegeben, wird es noch Feuer und das Akkordeon wechseln. Ich fand, dass ein Super-short Timeout bietet genug Verzögerung.
Hoffe, das hilft jemand!
Hier ist eine wirklich einfache Lösung
Always wahr sein sollte.
mein Vorschlag mit nicht Akkordeon () Funktion sein kann, [die ich nicht etwa vor wusste, Danke für bringen :)], aber noch zeigen, wie ein Akkordeon-UI-Element hat zu haben.
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>
Hope, das hilft.
Hier ist eine mögliche Alternative Skript für noch jemand dieses Problem auftreten: http://twostepmedia.co.uk/notes/development/jquery-accordion/
Als meine Antwort auf Ihre andere Frage sagt:
navigation: true
Sollte in Ihrer Optionsliste gesetzt werden.
