JavaScriptを使用してコンテンツをサイズ変更するにはif else関数を使用してください

Question

私はウェブサイトを初めて利用しています。私はここで何か間違っていると謝ります。

ここに問題があります。私はお互いの隣に3 divを持っています。そのうちの1つはメニューで、2つ目はプレーヤーで、3つ目はチャットボックスです。

セットアップは次のとおりです。メニューを開いてサブメニューを表示すると、プレーヤーは右にスライドして、プレーヤーの下のチャットボックスを押します。

私は、メニューが起動されるたびにチャットボックスのサイズを変更するためにjavascriptを使用することを考えました。

これは私がこれまで持っているものです。

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

}）;

これは機能します。

問題は、サブメニューを閉じたときにプレーヤーが元の位置にスライドしても、チャットボックスのサイズが元のサイズに変更されないことです。

if else関数を使用する必要があるように感じますが、コードを特定できません。

お願いします。機能を教えてください。

THISは、全体のコードです：https://codepen.io/LAMUUZ/pen/JJrodY

Answer 1

編集： あなたは、コンテナにtoggleClassを使用して、クラスに合格後幅30％

.tempWidth { 
width: 30% !important 
} 

を持つクラスを作成することができます。

$(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; 
    } 
}); 

よう

何かをintialクリックで変数を同じように設定してからの周りのその変数を変更する必要があります。また、一つだけでそれを達成することができれば、このような文：

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

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

jqueryには、このようなものに便利なトグルというメソッドがあります。基本的な実装では、要素の可視状態を切り替えるだけです。

滑りについて話す方法では、幅を変更しても30％にするのではなく、スライド効果を入れたいと思うかもしれません。ここ

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