مسج الأكورديون:الروابط لا تعمل
https://stackoverflow.com/questions/332384
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أنا أعمل على صفحة باستخدام مسج ل الأكورديون عنصر واجهة المستخدم.أنا غرار بلدي 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 -->
المشكلة:الروابط لا تعمل
في جميع المتصفحات لقد اختبرت الروابط في تلك القوائم الأكورديون سبب الأكورديون الباب إلى انهيار بدلا من ربط الصفحة.(لا يزال يمكنني انقر بزر الماوس الأيمن ثم انتقل إلى موقع مرتبط.)
يمكن أن يكون هذا نوعا من فوق ملزمة المسألة ؟
المحلول
بشكل افتراضي ، accordian القطعة مجموعات كل الروابط رؤوس.إلى تغيير ذلك ، تحتاج إلى تحديد محدد مع 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()})
إلا أن هذا الأخير لم يكن العمل بالنسبة لي على الرغم من رمز الحكمة فمن المنطقي, مسج ينفذ انقر فوق!أي شخص يمكن أن تفسر لي تتردد أنا من MooTools جوجل إغلاق الخلفية التي addEvent وظائف.
كان لدي نفس المشكلة و لا يمكن أن تجد إجابة في أي مكان.في الواقع عدة مصادر قالت انها فقط لا يمكن القيام به.
على مواصلة اللعب ، لم أجد حل العاملة.قد لا تكون كبيرة ، لكنه يعمل مثل السحر.
أولا, فقط تأكد من الروابط التي تريدها أن تكون قابلة للنقر ، مأمن الأكورديون الضوابط ، هو التعرف عليها بسهولة.كان لدي محاضرة على الألغام.
$('.stats a').click(function(){
expander.accordion('disable');
window.open($(this).attr('href'));
setTimeout ( function() {
expander.accordion('enable');
}, 250 );
});
أساسا هذه يستمع عندما رابط داخل الأكورديون رأس النقر.عندما يكون, الأكورديون هو تعطيل مؤقتا الحفاظ على اطلاق النار بشكل طبيعي.على الرابط ثم فتح في نافذة جديدة ولكن هل يمكن استخدام الوثيقة.الموقع وكذلك
إذا أردنا إعادة تمكين الأكورديون على الفور ، فإنه سوف لا تزال النار وتبديل الأكورديون.لقد وجدت أنه فائقة قصيرة مهلة يوفر ما يكفي من التأخير.
آمل أن يساعد هذا شخص!
AlwaysOpen يجب أن يكون صحيحا.
قد يكون اقتراحي هو عدم استخدام الأكورديون (وظيفة) ، [ التي لم أكن أعرف عنها من قبل ، شكرا لك على طرح الموضوع :) ] ولكن لا تزال تظهر كيف أن يكون قد الأكورديون عنصر واجهة المستخدم.
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>
مسج
<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
يجب تعيين في الخيار الخاص بك القائمة.
