javascript - 使用 jquery animate 时停止换行

原文 标签 javascript jquery html css responsive-design

我设置了这个 fiddle :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);
    }
}
}

最佳答案

添加 CSS 规则

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

关于javascript - 使用 jquery animate 时停止换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35895481/

相关文章:

javascript - 如何使用jQuery获取特定的表单元素

javascript - 如何从jQuery替换SVG中的文本元素的值

jquery - 将 JQuery Sortable toArray 与 connectWith 一起使用;如何获取所有项目的 ID?

html - 如何将 iframe 移向右侧?

html - CSS - 具有水平居中的单行和两行长条目的顶部菜单 - 没有 flex?

Javascript日期比较不包含年份

javascript - Meteor - 为什么我应该尽可能在 Meteor.userId() 上使用 this.userId?

javascript - Next.js 在 getInitialProps 中返回 404 错误页面

jquery - Canvas 标签在 Chrome 中产生黑色 block

javascript - 将多个图像文件插入 Canvas