Question

我正在尝试使用greensock tweenmax制作内容手风琴，并且有一些问题可以停用悬停状态并使点击的元素处于活动状态。

我有一个像这样的html结构：

<div id="bienvenue" class="col-sm-12 divContent">
    <div class="divImgBw"><img src="images/bienvenue_bw.png"/></div>
    <div class="divImg"><img src="images/bienvenue.png"/></div>
</div>

<div class="subContent" id="bienvenueContent">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>

    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate</p>      
</div>

其中divContent是触发slideToggle的元素，divImgBw类显示没有任何内容被点击或点击的状态，divImg是鼠标结束或点击时的状态。

所以这是我的jquery脚本：

$('.divContent').hover(function(){
    var $divContent = $(this).find('.divImg');
    $($divContent).addClass('grow');
    TweenMax.to($divContent, 0.5, {opacity:1});
},function(){
    var $divContent = $(this).find('.divImg');
    TweenMax.to($divContent, 1, {opacity:0});
});


var $subContent = $('.subContent');
$('.divContent').on('click', function() {

    var $divContent = $(this).find('.divImg');

    if(false == $(this).next().is(':visible')) {
        $subContent.slideUp(300);
        $('.divContent').removeClass('active');
    }

    $(this).next().slideToggle(300);
    $(this).toggleClass('active');


if($(this).hasClass('active')) {
    $(this).off('mouseenter mouseleave');       
    TweenMax.to($divContent, 1, {opacity:1});
} else {
    $(this).on('mouseenter mouseleave');        
    TweenMax.to($divContent, 1, {opacity:0});   
}

});

问题是我想在点击时取消绑定悬停状态，并将所选元素的divImg不透明度保持为1，而其他元素保持不活动状态但可以缓存。不知道我是否清楚......我的英语水平不是很好！无论如何，我尝试过不同的方法但没有成功。你可以在这里看到问题，这将更容易理解：http://www.lepoissonchat.fr/test/

感谢您的帮助。

Olivier

SlideToggle accordion active元素和unbind悬停

0 个答案: