javascript - 使用 if else 函数使用 javascript 调整内容大小

标签 javascript css

我是这个网站的新手,所以如果我在这里做错了什么,我深表歉意。

好吧,这是我的问题。我有 3 个 div 彼此相邻。其中一个是菜单,第二个是播放器,第三个是聊天框。

设置如下。当我打开菜单显示子菜单时,播放器向右滑出,插入播放器下方的聊天框。

我想在触发菜单时使用 javascript 来调整聊天框的大小。

这是我目前所拥有的:

$(document).ready(function(){
$(".zocial-youtube").click(function(){
    $(".container").css({"width": "30%"});
});

});

而且有效!

问题是当我关闭子菜单并且播放器滑回到原来的位置时,聊天框没有调整到原来的大小。

我觉得我需要使用 if else 函数,但我无法理解代码。

你能帮我实现这个功能吗?

这是完整的代码:https://codepen.io/LAMUUZ/pen/JJrodY

最佳答案

编辑: 您可以创建一个宽度为 30% 的类

.tempWidth {
width: 30% !important
}

然后在容器上使用 toggleClass 并传入该类。

$(document).ready(function(){
  $(".zocial-youtube").click(function(){
      $(".container").toggleClass("tempWidth");
  });
});

您是否尝试过使用切换而不是点击?

关于javascript - 使用 if else 函数使用 javascript 调整内容大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44740387/

相关文章:

javascript - React 中的承载身份验证

Javascript/jQuery 变量的首字母大写,带重音符号

读取a.txt文件的Javascript代码

css - 我可以关闭 SASS RGB -> 颜色名称吗

html - 如何使 Div 框看起来像 3D

javascript - 对象在 ie8 for javascript 中不支持此属性或方法

javascript - 我可以防止 Express 中的多个静态目录产生 404 吗?

html - 位置粘性不生效

css - 在 emacs 中,如何向 css 派生模式添加第二种类型的注释?

jquery - 固定位置问题