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');
});

小提琴