使用 jQuery 切换容器的宽度

【问题标题】：Toggle width of a container using jQuery使用 jQuery 切换容器的宽度
【发布时间】：2013-07-27 09:32:16
【问题描述】：

我正在为 MyBB 论坛软件开发一个主题。 我想添加一个功能，其中宽度从容器的固定 1000 像素扩展到 85% 的流体宽度，反之亦然，使用 jQuery 的慢动画。 我想要一个切换按钮，上面写着展开 - 收缩按钮。 容器还应该支持 cookie，因此当用户重新加载页面时，它的宽度将与他选择的相同。 我尝试了 Stackoverflow 和网络上的许多解决方案，但徒劳无功。 帮助表示赞赏。 提前致谢， 问候

代码如下：

您好，我想通了.... jquery 切换，但我想向它添加 cookie。 这是代码

$(document).ready(function(){
$('#toggle-button').click( function() {
var toggleWidth = $("#container").width() == 960 ？ “85%”：“960px”；
$('#container, .wrap').animate({ width: toggleWidth });
});
});

谢谢:)

【问题讨论】：

  • 请添加示例代码，以便我为您提供帮助。
  • 您好，我想通了.... jquery 切换，但我想向它添加 cookie。这里是代码 >
    >
    > $('#container, .wrap').animate({ width: toggleWidth });
    > });
    > }); 谢谢:)
  • 编辑了第一篇文章

标签： jquery width toggle containers forum


【解决方案1】：

以下是根据您的要求的代码，因此请尝试以下代码：
HTML 

<div id="container">this is container div</div>
<div class="wrp">this is wrp div</div>
<input type="button" value="toggle" id="toggle-button">

CSS 

#container {
   width:960px;
   background-color: red;
}
.wrp {
    width:1000px;
    background-color: green;
}

JS

$(document).ready(function () {
    var setWidth = $.cookie("width");
    if (typeof setWidth !== "undefined" && setWidth == "85%") {
        $('#container,.wrp').width(setWidth); // 85% width set using cookie
    } else if (typeof setWidth !== "undefined" && setWidth == "960px") {
        $('#container,.wrp').width(setWidth); // 960px,1000px(for wrp) width set using cookie
    }
    $('#toggle-button').click(function () {
        var toggleWidth = $("#container").width() == 960 ? "85%" : "960px";

        $('#container, .wrp').animate({
            width: toggleWidth
        });
        $.cookie('width', toggleWidth);
    });
});

JSFIDDLE DEMO

注意：您必须将 jquery.cookie.min.js 包含到您的文件中，cookie 才能发挥作用

【讨论】：

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode