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

我是这个网站的新手，所以如果我在这里做错了什么，我向你道歉

好吧，这是我的问题。我有三个分区挨着一个。其中一个是菜单，第二个是播放器，第三个是聊天室

设置如下所示。当我打开菜单显示子菜单时，播放机向右滑动，按下播放机下方的聊天框

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

这就是我到目前为止所做的：

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

}))

而且它有效

问题是，当我关闭子菜单，播放器滑回其原始位置时，聊天框不会调整为其原始大小

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

你能帮我做一下这个功能吗

这是全部代码：

编辑： 您可以创建宽度为30%的类

.tempWidth {
width: 30% !important
}

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

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

是否尝试使用切换而不是单击？

编辑： 您可以创建宽度为30%的类

.tempWidth {
width: 30% !important
}

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

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

---

您是否尝试过使用toggle而不是click？

您可以使用if-else语句，这对您来说可能是一个不错的练习。在这种情况下，您应该设置一个变量，如初始单击，然后围绕

像这样的

 var makeDivSmall = true;
 $(".zocial-youtube").click(function(){
     if(makeDivSmall){
     $(".container").css({"width": "30%"});
     makeDivSmall = false;
     }
     else{
     $(".container").css({"width": "100%"});
     makeDivSmall = true;
     }
 });

您也可以只使用一条if语句来完成它，如下所示：

  $(document).ready( function(){
     $('.zocial-youtube').click( function() {
     var toggleWidth = "100%"
     if($(".container").css("width") == "100%"){
           toggleWidth = "30%" 
      }

    $('.container').animate({ width: toggleWidth });
     });
 });

jquery还有一个名为toggle的方法，可以方便地处理类似的事情。基本实现只是切换元素的可见状态

顺便说一句，你说的是滑动，所以当宽度改变时，你可能想使用滑动效果，而不是仅仅将其捕捉到30%？看看这里

 $( "container" ).animate({
     width: "30%"
   }, 1500 );

---

您可以使用if-else语句，这对您来说可能不是一个好的练习。在这种情况下，您应该设置一个变量，如初始单击，然后围绕

像这样的

 var makeDivSmall = true;
 $(".zocial-youtube").click(function(){
     if(makeDivSmall){
     $(".container").css({"width": "30%"});
     makeDivSmall = false;
     }
     else{
     $(".container").css({"width": "100%"});
     makeDivSmall = true;
     }
 });

您也可以只使用一条if语句来完成它，如下所示：

  $(document).ready( function(){
     $('.zocial-youtube').click( function() {
     var toggleWidth = "100%"
     if($(".container").css("width") == "100%"){
           toggleWidth = "30%" 
      }

    $('.container').animate({ width: toggleWidth });
     });
 });

jquery还有一个名为toggle的方法，可以方便地处理类似的事情。基本实现只是切换元素的可见状态

顺便说一句，你说的是滑动，所以当宽度改变时，你可能想使用滑动效果，而不是仅仅将其捕捉到30%？看看这里

 $( "container" ).animate({
     width: "30%"
   }, 1500 );

---

如果..else

不是一个函数，它是一个语句。。。如果你向代码展示实际问题发生的地方，你可能会得到一些答案。它的原始大小是多少？i、 e在调整大小之前，

.container

是否具有特定的宽度css属性？另外，它是唯一一个同名的类吗？请尝试向我们显示HTML中包含这些元素的部分。如何关闭子菜单？html将是有用的这是整个代码：

如果..else

不是一个函数，它是一个语句。。。如果你向代码展示实际问题发生的地方，你可能会得到一些答案。它的原始大小是多少？i、 e在调整大小之前，

.container

是否具有特定的宽度css属性？另外，它是唯一一个同名的类吗？请尝试向我们显示HTML中包含这些元素的部分。如何关闭子菜单？html会很有用这是全部代码：toggle似乎已经被弃用了。如果他不点击同一个按钮来打开/关闭菜单怎么办？html是一个完整的解决方案所必需的。查看答案确实适合这种情况。像他说的那样创建一个类，在点击事件中使用toggleClass（'tempWidth'），好了，它可以工作了！谢谢。我是一个自学成才的人，所以有时候会变得很难。谢谢！看来toggle已经被弃用了。如果他不点击同一个按钮来打开/关闭菜单怎么办？html是一个完整的解决方案所必需的。查看答案确实适合这种情况。像他说的那样创建一个类，在点击事件中使用toggleClass（'tempWidth'），好了，它可以工作了！谢谢。我是一个自学成才的人，所以有时候会变得很难。谢谢！谢谢你，凯文。你可以给我绿色的记号。谢谢凯文。你可以给我绿色的记号。