jquery - ホバー時に幅を切り替え、クリックしたままにし、クリックで離し、クリックしてオフにします

Question

CSS を介してホバーで展開する div があります。ユーザーがdivをクリックしたときに、その幅のままにしたい。これまでのところ、私はこれを機能させています。

ただし、ユーザーが div を再度クリック (トグル) したとき、およびユーザーがドキュメントの残りの部分で div をクリックした場合は、div を元のサイズに折りたたむ必要があります。

フィドルはこちら

ここにjQuery：

$(".rail").click(function() {
    $(".rail").width( 180 );
});

ここにCSS：

.rail{
   width: 30px;
   border-left: 10px solid #ff5400;
   position: absolute;
   top: 0px;
   bottom: 0px;
   right: 0px;
   background-color: rgba(0,0,0,0.15);
   cursor: pointer;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
 }
.rail:hover{
   width: 180px;
   background-color: #ddd;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}

Answer 1

はい、どうぞ。そのフィドルを更新しました。

http://jsfiddle.net/ZfKYr/8/

私が変更したのは：

1.) Added a '.rail-sticky' rule that forces the rail open.
2.) Changed the click function to toggle that rule instead of forcing it open.

HTML:

<div class="rail">

</div>​

JavaScript:

$(".rail").click(function() {
    $(".rail").toggleClass('rail-sticky');
    return false;
});

$(document).on('click',':not(.rail)',function()
{
    $('.rail').removeClass('rail-sticky');
});

</p>

CSS:

.rail{
    width: 30px;
    border-left: 10px solid #ff5400;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    background-color: rgba(0,0,0,0.15);
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.rail:hover{
    width: 180px;
    background-color: #ddd;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.rail-sticky
{
    width: 180px;
}​

Answer 2

$(".rail").on({
    mouseenter: function() {
        $(this).addClass('hover');
    },
    mouseleave: function() {
        $(this).removeClass('hover');
    },
    click: function() {
        $(this).toggleClass('active');
    }
});

$(document).on('click', function(e) {
    if (!$(e.target).is('.rail') && $('.rail').is('.active')) $('.rail').removeClass('active');
});

フィドル