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

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

FIDDLE

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

2 个答案: