Question

我设置了这个小提琴：https://jsfiddle.net/xwb9594m/

正如您所看到的，当幻灯片菜单关闭时，内容会随着菜单缩小而换行。我正试图让它干净利落地离开屏幕一侧。

这是我的JS：

$(document).ready(function() {

      var menuBtn = $('.video-search-button'),
             menu = $('.video-search-menu'),
            close = $('.video-search-menu .close');

      menuBtn.click(function(){
          menu.animate({width: 'toggle'});
      });

      close.click(function(){
         menu.animate({width: 'toggle'});
      });

});

和我的SCSS：

.video-search-menu {
display: none;
position: fixed;
top: 0;
right: 0;
width: auto;
height: 100%;
overflow: hidden;
background: #24637e;
background: rgba(36, 99, 126, 0.9);
color: #fff;
z-index: 101;

&-wrapper {
    position: relative;
    padding: 180px 50px 0 50px;
}

.close {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 15px;
    left: 15px;
    z-index: 9999;
    cursor: pointer;

    &:before, &:after {
        content: '';
        position: absolute;
        width: 100%;
        top: 50%;
        height: 2px;
        background: #ffffff;
        transform: rotate(45deg);
    }

    &:after {
        transform: rotate(-45deg);
    }
}
}

Answer 1

添加CSS规则

p{
    overflow: hidden;
    white-space: nowrap;
}

Answer 2

我更新了您的 jsFiddle 或者复制以下代码：

$(document).ready(function() {

          var menuBtn = $('.video-search-button'),
                 menu = $('.video-search-menu'),
                close = $('.video-search-menu .close');

                    var right = (1 - menu.width()) - 1;
                menu.css('right', right);

          menuBtn.click(function(){
              menu.animate({right: 0}).show();
          });

          close.click(function(){
             menu.animate({right: right});
          });

});

更新：再次点击按钮

时关闭菜单

jsFiddle

或复制以下代码：

$(document).ready(function() {

          var menuBtn = $('.video-search-button'),
                 menu = $('.video-search-menu'),
                close = $('.video-search-menu .close');

                    var right = (1 - menu.width()) - 1;
                menu.css('right', right);

          menuBtn.click(function(){
              if(menu.is(':visible')) {
                close.trigger('click');
              }
              else {
                menu.animate({right: 0}).show();
              }
          });

          close.click(function(){
             menu.animate({right: right}, function() {
                menu.hide();
             });
          });

});

更新2： 您还可以为关闭的“图标”保存一些代码行：

jsFiddle

使用jquery动画时停止换行

2 个答案: