jquery - 悬停时切换宽度，单击时保持，单击时释放并单击关闭

Question

我有一个通过 CSS 在悬停时展开的 div。我希望它在用户单击 div 时保持该宽度。到目前为止，我有这个工作。

但是，当用户再次单击 div(切换)以及用户单击文档其余部分的 div 时，我需要将 div 折叠回原始大小。

Fiddle is here

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

给你。我更新了那个 fiddle 。

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

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;
}​