2016-11-05 11 views
0

Я пытаюсь оживить ширину пары div рядом друг с другом щелчком мыши. Выбранный div должен расширяться (стиль .slide_active), а другой div должен уменьшаться (стиль .slide_inactive).JQuery toggleClass и CSS animate div width

<body> 
    <div class="slide"></div> 
    <div class="slide"></div> 
</body> 

Я хочу использовать CSS для стилизации различных состояний этих «.slide» дивы

.slide { 
    float: left; 
    height: 200px; 
    width: 100px; 
    background-color: salmon; 
    overflow: hidden; 
    -webkit-transition-duration: 0.8s; 
} 

.slide_active { 
    width: 200px; 
    background-color: red; 
} 

.slide_inactive { 
    width: 50px; 
    background-color: black; 
} 

Таким образом, я также с помощью CSS для анимации изменения, но использовать Jquery для переключения различных классы.

$('.slide').click(function() { 
    $(this).toggleClass('slide_active'); 
    if (!$('.slide').hasClass('slide_active')) { 
    $('.slide').toggleClass('slide_inactive'); 
    }; 
}); 

Это не работает. Если они имеют ограниченное понимание кода и не могут понять это.

Я создал jsfiddle:

https://jsfiddle.net/thomascs/go571dw9/1/

+0

Спасибо за комментарии! Возможно, я смутил вас, упростив мой вопрос. В моем приложении я использую 4 divs и 3 возможных состояния, либо только .slide, либо один с .slide_active и все остальные .slide_inactive. Div может быть либо 10%, 25%, либо 70% в ширину. Фильтр заставил меня думать, но вместо этого я использовал .not. Вот рабочий код: https://jsfiddle.net/thomascs/aj0dvhbm/ – thomascs

ответ

0

Спасибо за комментарии! Возможно, я смутил вас, упростив мой вопрос. В моем приложении я использую 4 divs и 3 возможных состояния, либо только .slide, либо один с .slide_active и все остальные .slide_inactive. Div может быть либо 10%, 25%, либо 70% в ширину.

. Фильтр заставил меня думать, но вместо этого я использовал .not.

Вот рабочий код: jsfiddle.net/thomascs/aj0dvhbm

0

Таким образом, проблема в том, что вы проверяете, если каждый слайд имеет slide_inactive класс, то переключать этот класс на всех слайдах.

Давайте изменим код немного:

var $slides = $('.slide'); 

$slides.click(function() { 
    $slides 
     .filter('.slide_active') // filter out all active slides 
     .removeClass('slide_active'); // set slides to unactive 

    $(this).addClass('slide_active'); // set target slide to active 
}); 
+0

Что относительно класса .slide_inactive? –

+0

Ну, тогда вы должны добавить '.addClass ('slide_inactive')' после '.removeClass ('slide_active')'. Но подумайте об этом; когда слайды не имеют активного класса, вы можете предположить, что он неактивен. Так зачем добавлять другой класс в первую очередь. – JasonK

+0

Поскольку код OPs имеет три состояния: 'active',' inactive' и ни один из двух. Я согласен с тем, что имеет смысл иметь только 2 состояния, но это не то, что он показывает –

0

Попробуйте, использовать hasClass() method, чтобы проверить, если .slide класс состоит из .slide_active класса или нет.

$('.slide').click(function() { 
 
\t $('.slide').addClass('slide_active'); 
 
    \t $('.slide').removeClass('slide_inactive'); 
 
    if($(this).hasClass('slide_active')){ 
 
    \t $(this).addClass('slide_inactive'); 
 
    $(this).removeClass('slide_active'); 
 
    } 
 
});
.slide { 
 
    float: left; 
 
    height: 200px; 
 
    width: 100px; 
 
    background-color: salmon; 
 
    overflow: hidden; 
 
    -webkit-transition-duration: 0.8s; 
 
    transition:width 0.6s ease; 
 
} 
 

 
.slide_active { 
 
    width: 200px; 
 
    background-color: red; 
 
} 
 

 
.slide_inactive { 
 
    width: 50px; 
 
    background-color: black; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slide"></div> 
 
<div class="slide"></div>

+0

. Что относительно класса '.llid_inactive'? –

+0

@RoryMcCrossan как OP спросил, что он пытается переключиться между div, поэтому мы можем внести изменения в код и заставить их работать, используя add и removeClass. – frnt

1

Вы можете сделать так,

$('.parent_slide .slide').on('click', function() { 
 
    $('.parent_slide .slide').addClass('slide_inactive'); 
 
    $(this) 
 
    .removeClass('slide_inactive') 
 
    .addClass('slide_active'); 
 
});
.slide { 
 
    float: left; 
 
    height: 200px; 
 
    width: 100px; 
 
    background-color: salmon; 
 
    overflow: hidden; 
 
    -webkit-transition-duration: 0.8s; 
 
    cursor: pointer; 
 
} 
 
.slide_active { 
 
    width: 200px; 
 
    background-color: red; 
 
} 
 
.slide_inactive { 
 
    width: 50px; 
 
    background-color: black; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="parent_slide"> 
 
    <div class="slide"></div> 
 
    <div class="slide"></div> 
 
</div>