Question

当我点击article.hope时，我想要我之前关闭的mouseenter和mouseleave功能。我得到了它的工作，但是一旦我点击其中一个article.hope兄弟姐妹，我就无法恢复此功能。

这是我到目前为止所拥有的。

$("article.hope").mouseenter(function(){
        $(this).children('div').fadeIn(0);
        $(this).children('aside').fadeOut(0);   
        });

        $("article.hope").mouseleave(function(){
            $(this).children('div').fadeOut(0);
            $(this).children('aside').fadeIn(0);

        });

$("article.rama").mouseenter(function(){
        $(this).children('div').fadeIn(0);
        $(this).children('aside').fadeOut(0);   
        });

        $("article.rama").mouseleave(function(){
            $(this).children('div').fadeOut(0);
            $(this).children('aside').fadeIn(0);

        });





$("article.hope").click(function(){
        $(this).off('mouseenter mouseleave');
        $(this).siblings('article').on('mouseenter mouseleave')
        $('section.hope').slideDown(0500, 'swing')
        $('section.hope').siblings('section').fadeOut(0)
        $(this).siblings('article').fadeIn(0);
        });

$("article.rama").click(function(){
        $(this).off('mouseenter mouseleave');
        $(this).siblings('article').on('mouseenter mouseleave')
        $('section.rama').slideDown(0500, 'swing')
        $('section.rama').siblings('section').fadeOut(0)
        $(this).siblings('article').fadeIn(0);
        });

当我点击mouseenter时，mouseleave和article.hope关闭就好了，但我似乎无法重新开启。

编辑：.removeclass / .addclass

HTML

<article class="hope">
   <aside><!--background-image--></aside>
        <div>
            <h2>projet personnel</h2>

            <p>First contact</p>
        </div>
  </article>

CSS

article {
    width:100%;
    height:210px;
    /*background-color:#f7383e;*/
    color:#f0f0f0;
    text-decoration: none;
    margin:0 auto;
    text-align:center;
    overflow:hidden;


}

article div {
    /*max-width:980px;*/
    margin:0 auto;
    text-align:center;
    overflow:hidden;
    position:relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    display:none;


}


article div h2 {
    letter-spacing:2px;
    font-size:130%;
    font-family:'ostrich_sansmedium', Arial, Helvetica, sans-serif;


}

article p {
    margin:10px 0;
    padding:5px;
    display:inline-block; 
    font-family:'nevis',Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    font-size:150%;
    border-top:2px solid #f0f0f0;

}



    article.hope aside {
        height:210px;
        background-image:url(../images/hope.jpg);
        background-position: 50% 50%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-repeat:no-repeat;

    }

JQUERY

$("article.hope").mouseenter(function(){
        $(this).children('div').fadeIn(0);
        $(this).children('aside').fadeOut(0);   
        });

        $("article.hope").mouseleave(function(){
            $(this).children('div').fadeOut(0);
            $(this).children('aside').fadeIn(0);

        });

$("article.hope").click(function(){
        $(this).removeclass("hope");
        $(this).siblings('article').addclass("hope");

        $('section.hope').slideDown(0500, 'swing')
        $('section.hope').siblings('section').fadeOut(0)
        $(this).siblings('article').fadeIn(0);
        });

我很确定我需要在某个地方设立一个新课程，但我不知道在哪里......

Answer 1

我按照你的逻辑重写了你的脚本。我所做的改变是：

首先声明enter()和leave()函数，然后将它们绑定到触发悬停事件时调用的匿名函数
链接方法，因此当多行使用相同的选择器时，您不必一遍又一遍地对jQuery进行元素搜索

这就是：

// Declare functions onMouseEnter and onMouseLeave
var enter = function($ele) {
    $ele
    .children('div')
        .fadeIn(0)
        .end()
    .children('aside')
        .fadeOut(0)
        .end(); // Optional but I use it for consistency
},  leave = function($ele) {
    $ele
    .children('div')
        .fadeOut(0)
        .end()
    .children('aside')
        .fadeIn(0)
        .end(); // Optional but I use it for consistency
};

// Bind functions to correct event handlers
// We can concatenate mouseenter and mouseleave with hover
$('article.hope, article.rama').hover(function() {
    enter($(this));
}, function() {
    leave($(this));
}).click(function() {
    // Turn off mouse events when clicked
    // Turn on mouse events for siblings
    $(this)
    .off('mouseenter mouseleave')
    .siblings('article')
        .fadeIn(0)
        .hover(function() {
            enter($(this));
        }, function() {
            leave($(this));
        });

    // Now perform stuff for <section>
    $('section.'+$(this).attr('class'))
    .slideDown(500, 'swing')
    .siblings('section')
        .fadeOut(0);

});

如何切换我关闭的功能

1 个答案: