jQuery Click and ToggleClass Question
-
29-09-2019 - |
سؤال
ها هي مشكلة بسيطة (ونأمل) على الأرجح:
لدي قائمة مع الصور مثل التنقل. عندما تحوم فوقهم ، تقوم JQuery بتحريك Div مع تعليق ويظهر ذلك. إنه يعاني من mouseout. (يعمل بشكل جيد)
عند النقر على الصورة ، فإن Caption Div يختلط بشكل أكبر ويتغذى على الصورة بشكل كامل (يعمل بشكل جيد). بينما تحوم على صورة أخرى في NAV ، فإن التسمية التوضيحية Div Aswell (تعمل بشكل جيد).
المشكلة: عند النقر فوق صورة التنقل الثانية ، يجب أن تشير الرسوم المتحركة للآخر (تم النقر فوقها).
ها هي jQuery:
var thumbslide = $('.boxgrid.captionfull').click(function() {
$(this).toggleClass('clicked').children('.cover').stop().animate({top: 0, height:"230px", opacity: 1}, 350);
});
$('.boxgrid.captionfull:not(.clicked)').live('mouseenter', function() {
$(this).children('.cover').stop().animate({top: 130}, 350);
}).live('mouseleave', function() {
$(this).children('.cover').stop().animate({top: 230}, 350);
})
وهنا رابط إلى موقع ديف
أي مساعدة مرحب بها ، شكرًا.
المحلول
هذا يزيل clicked
الفصل ويعززه إلى أسفل ويعيد العتامة إلى 0.7:
var thumbslide = $('.boxgrid.captionfull').click(function() {
$('.boxgrid.captionfull.clicked').removeClass('clicked').children('.cover').stop().animate({top: 230, opacity: 0.7}, 350);
$(this).toggleClass('clicked').children('.cover').stop().animate({top: 0, height:"230px", opacity: 1}, 350);
});
نصائح أخرى
أليس هذا مجرد حالة للعثور على أي عنصر آخر تم النقر عليه وإزالة فئة النقر؟
var thumbslide = $('.boxgrid.captionfull').click(function() {
$('.boxgrid.captionfull.clicked').removeClass('clicked');
$(this).toggleClass('clicked').children('.cover').stop().animate({top: 0, height:"230px", opacity: 1}, 350);
});
لا تنتمي إلى StackOverflow