Jquery 悬停时切换宽度，单击时保持，单击时释放，然后单击关闭

我有一个div，它通过CSS在hover上展开。我希望当用户单击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;
}

---

给你。我更新了那把小提琴

我改变的是：

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:

​

CSS:

---

给你。我更新了那把小提琴

我改变的是：

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:

​

CSS:

---

不知道为什么这是公认的答案。它的复杂性是原来的两倍\@teh1-不是真的，我只是在jQuery中也做了悬停的东西，因为我喜欢把它们放在一个地方，如果你删除悬停功能，它几乎和你的答案完全一样。这是非常侵入性的。取出jQuery将完全破坏它。使用我的方法，它将完全起作用，除了在没有jQuery的情况下单击时会卡住。不用担心。不知道为什么这是公认的答案。它的复杂性是原来的两倍\@teh1-不是真的，我只是在jQuery中也做了悬停的东西，因为我喜欢把它们放在一个地方，如果你删除悬停功能，它几乎和你的答案完全一样。这是非常侵入性的。取出jQuery将完全破坏它。使用我的方法，它将完全起作用，除了在没有jQuery的情况下单击时会卡住。不用担心。我必须把它交给adeneo，因为它在页面的其余部分为我提供了点击关闭功能。我必须把它交给adeneo，因为它在页面的其余部分为我提供了点击关闭功能。

<div class="rail">

</div>​

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

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

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