Question

我是网站的新用户，所以如果我在这里做错了，我会道歉。

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

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

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

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

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

}）;

它有效！

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

我觉得我需要使用if else函数，但我无法弄清楚代码。

请帮我解决这个问题？

这是整个代码：https://codepen.io/LAMUUZ/pen/JJrodY

Answer 1

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

.tempWidth {
width: 30% !important
}

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

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

您是否尝试使用切换而非点击？

Answer 2

你可以使用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函数使用javascript调整内容大小

2 个答案: