モバイルビューではHTMLハンドラから更新されないHTML要素

Question

大きなサイズではすべて正常に動作しますが、メニューボタンを使用する必要がある小さい画面サイズの場合、HTMLはイベントハンドラによって更新されません私がconsole.log()でチェックすると正常に動作するように見えますが）。 ここで、モバイルビューで「オンライン」をクリックすると、HTMLページが更新されませんが、ボタンが表示されなくなるまで大きな幅に拡大すると、htmlが更新されます。何が間違っていますか？私はあなたの助けに感謝します。

$(document).on('click', '.alli',() => { 
    $(".colu").hasClass("no_display") ? (console.log("Yes"), $(".colu").removeClass("no_display")) : console.log("no"); 
    ($("#online").hasClass("oncli")) ? ($("#online").removeClass("oncli"), $("#all").addClass("oncli")) : 
    ($("#offline").hasClass("oncli")) ? ($("#offline").removeClass("oncli"), $("#all").addClass("oncli")) : 
    console.log("Adding class oncli"); 
}); 

$(document).on('click', '.onlinei',() => { 
    $("#offline").hasClass("oncli") ? ($("#offline").removeClass("oncli"), $("#online").addClass("oncli")) : 
    $("#all").hasClass("oncli") ? ($("#all").removeClass("oncli"), $("#online").addClass("oncli")) : 
    console.log("Adding class oncli"); 
    $(".online").hasClass("no_display") ? (console.log("yes"), $(".online").removeClass("no_display"), $(".offline").addClass("no_display")) : 
    $(".offline").hasClass("no_display") ? console.log("already in online views") : $(".offline").addClass("no_display"); 
}); 
$(document).on('click', '.offlinei',() => { 
    $("#all").hasClass("oncli") ? ($("#all").removeClass("oncli"), $("#offline").addClass("oncli")) : 
    $("#online").hasClass("oncli") ? ($("#online").removeClass("oncli"), $("#offline").addClass("oncli")) : 
    console.log("Adding class oncli"); 
    $(".offline").hasClass("no_display") ? (console.log("yes"), $(".offline").removeClass("no_display"), $(".online").addClass("no_display")) : 
    $(".online").hasClass("no_display") ? console.log("already in offline views") : $(".online").addClass("no_display"); 
}); 


$(document).on('paste copy cut keyup keydown', '#search-bar',() => { 
     ($("#search-bar").val() === "search") ? $("#search-bar").val(""): console.log("searching.."); 
     $(".name").each(function() { 
     ($(this).text().toLowerCase().indexOf($("#search-bar").val()) > -1) ? $(this).parent().parent().removeClass("no_display"): 
      ($(this).parent().parent().addClass("no_display")); 
     }); 

Answer 1

が、私はそれが異常行動を起こした@mediaでのCSSプロパティdisplay:inline-block、だった考え出し：

は、ここに私のjQueryのコードです。