Jquery関数の場合とそうでない場合の書き込み方が良い

Question

このコードブロックは、よりシンプルで効率的なものに圧縮できることは確かです。しかし、私は困惑しています。もし誰かが私を助けることができれば、それは非常に高く評価されるでしょう！

var close = "true"; 

$(document).on('click', '[data-toggle-nav]', function(event) { 


    if ($(this) && close === "true") { 
    console.log('close'); 
    $('#top').css('transform', 'rotate(45deg)').css('top', '10px'); 

    $('#mid').css('transform', 'rotate(-45deg)').css('top', '10px'); 

    $('#bot').css('display', 'none'); 
    close = "false"; 
    } 

    else if ($(this) && close === "false") { 
    console.log('open'); 
    $('#top').css('transform', 'rotate(0deg)').css('top', '0px'); 

    $('#mid').css('transform', 'rotate(0deg)').css('top', '10px'); 

    $('#bot').css('display', 'block'); 

    close = "true"; 
    } 

}); 

Answer 1

まずcloseは本当に比較を容易にするために、boolean値である必要があります。ただし、必要な要素と表示状態のCSSクラスを単にトグルするだけで、その変数を必要とせずに必要なものを達成することができます。#bot。なぜ `close`ないブール値です

#top { 
    top: 0; 
} 
#top.open { 
    transform: rotate(45deg); 
    top: 10px; 
} 
#mid.open { 
    transform: rotate(-45deg); 
    top: 10px; 
} 

$(document).on('click', '[data-toggle-nav]', function(event) { 
    $('#top, #mid').toggleClass('open'); 
    $('#bot').toggle(); 
}); 

Working example