Új hozzászólás Aktív témák

• #15499 trisztan94 őstag

  Új Válasz 2017-01-20 15:44:12 #15499

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  trisztan94

  őstag

  Sziasztok!

  Lassan 8 órája szívok ezzel.

  limo-king.com, főoldalon az accordion. Ha rákattintasz az egyikre, átvisz egy aloldalra. Ha az aloldalról amire átvitt a böngésző "back" gombjával viszont visszamész a főoldalra, "beragad" a korábban kattintott autó.

  Ez a jQuery ami kezeli (nézzétek el kérlek a spaghetti-t):

  $('.limo-slider ul li').on({
mouseenter: function() {
if($(this).parents('.limo-slider').hasClass('bottom-slider')) {
$('.limo-slider.bottom-slider ul li').css('margin-right', '-580px');
$('.limo-slider.bottom-slider .accordion-select').removeAttr('checked');
$(this).find('.accordion-select').attr('checked', 'checked');
} else {
$('.limo-slider:not(.bottom-slider) ul li').css('margin-right', '-580px');
$('.limo-slider:not(.bottom-slider) .accordion-select').removeAttr('checked');
$(this).find('.accordion-select').attr('checked', 'checked');
}

},
mouseleave: function() {

if($(this).parents('.limo-slider').hasClass('bottom-slider')) {
$('.limo-slider.bottom-slider ul li').css('margin-right', '-505px');
$('.limo-slider.bottom-slider .accordion-select').removeAttr('checked');
} else {
$('.limo-slider:not(.bottom-slider) ul li').css('margin-right', '-505px');
$('.limo-slider:not(.bottom-slider) .accordion-select').removeAttr('checked');
}
}

});

  Ez pedig a css:

  .accordion.limo-slider {
font-family: Arial, Helvetica, sans-serif;
margin: 0 auto;
height: 347px;
width: 960px;
/* Egy kép szélessége 632px */
}

.accordion.limo-slider > ul > li,
.limo-slider .accordion-title,
.limo-slider .accordion-content,
.limo-slider .accordion-separator {
float: left;
}

.accordion.limo-slider > ul > li {
margin-right: -505px;
/* -580px akkor ha van checked */
margin-bottom: -0px;
}

.limo-slider .accordion-select:checked:not(.last-item) ~ a .accordion-separator {
margin-right: 430px;
margin-bottom: 0px;
}

.limo-slider .accordion-title,
.limo-slider .accordion-select {
background-color: #F3B978;
color: #000;
width: 30px;
height: 350px;
font-size: 16px;
text-transform:uppercase;
}

.limo-slider .accordion-title span {
margin-bottom: 15px;
margin-left: 20px;
}

.limo-slider .accordion-title span {
transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-ms-writing-mode: lr-bt;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
margin-left: 0px;
line-height: 30px;
}

.limo-slider .accordion-content {
height: 347px;
width: 632px;
padding: 0px;
}

.limo-slider .accordion-title,
.limo-slider .accordion-select:checked ~ .accordion-content {
margin-right: 0px;
margin-bottom: 0px;
}

/* Do not change following properties, they aren't
generated automatically and are common for each slider. */
.accordion {
overflow: hidden;
}

.accordion > ul {
margin: 0;
padding: 0;
list-style: none;
width: 1000%;
overflow: hidden;
}

.accordion > ul > li,
.accordion-title {
position: relative;
}

.accordion-select {
cursor: pointer;
position: absolute;
opacity: 0;
top: 0;
left: 0;
margin: 0;
z-index: 1;
}

.accordion-title span {
display: block;
position: absolute;
bottom: 0px;
width: 100%;
white-space: nowrap;
}

.accordion-content {
position: relative;
overflow: hidden;
}

.accordion-separator, .limo-slider ul li {
transition: margin 0.7s ease-in-out;
-o-transition: margin 0.7s ease-in-out;
-moz-transition: margin 0.7s ease-in-out;
-webkit-transition: margin 0.7s ease-in-out;
}

  Na most.. Próbáltam elég sok mindent. Az a lényeg, hogy a "beragadt" elem felvesz valami részemről érthetetlen okból egy 1092px-es szélességet. Első próbálkozásom a li elemeknek egy max-width beállítása volt (egy li elem amgy 662px széles, amiből a kép 632px, 30px pedig a neve), viszont akkor megáll az accordion működése.

  A mouseenter eseménynél van egy checkbox check-elés is, viszont az visszakattintásnál eltűnik.

  Valaki valami tipp?

  Köszönöm!

  https://heureka-kreativ.hu

Új hozzászólás Aktív témák