web-dev-qa-db-ja.com

slideToggle後にDIVが開いているか閉じているかをテストする方法

クリックすると、div（.icons）を切り替えていくつかのアイコンを表示するJquery Uiボタン（#toggleIcons）があります。また、Jquery IsotopeとInfinitescrollを使用して、新しい画像を動的に追加しています。私がしようとしていることは、新しい画像が追加および更新されるときに、slideToggle状態を保持する方法を用意することです。 Ifinitescrollにはコールバック関数があり、ページとアイコンの状態を更新できます。

//My button click function
$("#styleSwitcher #toggleIcons" ).click(function() {
   $('.icons').slideToggle('slow');
   //for Isotope to update the layout
   $('#container').isotope('reLayout') 
    return false;
});

//code I am working on to put in callback to test if div is open or closed
if($(".icons").is(":hidden"))
{
  $('.icons').hide();
}
else
{
  $('.icons').show();
}

機能していません。どんな助けや指示もいただければ幸いです。ありがとう

jqueryif-statementslidetoggle
16
Macsupport

あなたの状態は逆です：

if ($(".icons").is(":visible")) { <-----
  $('.icons').hide(); 
} else {
  $('.icons').show(); 
}
26
Mike Gleason jr Couturier

チェック状態スクリプトを関数に入れます-少し保持します。

$('.advance-view').click(function() {
    $('#advance-control').slideToggle('slow', function() {
        if ($('#advance-control').is(':hidden'))
        {
            $('.advance-view').css("background-color", "#2B509A");
        }
        else
        {
            $('.advance-view').css("background-color", "#4D6837");
        }
    });             
});
21
Ryan Harne

toggle や slideToggle だけではないのはなぜですか？

$(".icons").toggle();
2
FatherStorm

私は使うだろう :visible

if($(".icons:visible").length > 0)
    //item is visible
else
    //item is not visible

コードにこだわりたい場合

if($(".icons").is(":hidden"))

おそらく読むべきです

if($(".icons").is(":hidden").length > 0)
2
Dutchie432

私は同じことをしていましたが、IDベースのセットアップの場合、代わりにこれを使用したときに機能することがわかりました

if ($(this).is(':hidden')) {
    var state = "closed";
} else {
    var state = "open";
}

alert($(this).attr('id') + ' is ' + state);
return false;
1
Jamie

より堅牢で短い別の方法を使用します。要素に「open」などの属性を追加できます。初めて読むときはそこにはないので、それが初期位置であると想定します。それが「0」の場合はそれを逆にし、条件ブロックでslidedown（）またはslideup（）を実行します

これには多くの利点があります：-ブラウザーデバッガーで値を読み取って変更を確認できます-.eachイテレーターを使用してその値を読み取り、開いている値を確認できるのが最も便利です

function toggleBox(id) {
    let o = $("#box_" + id);    
    let op = o.attr("open") !== undefined;  
    if (op) {
        o.slideUp();
        o.removeAttr("open");       
    } else {
        o.slideDown();
        o.attr("open","1");     
    }   
}
0
user12282614

私はあなたが何を望んでいるか理解していると思います。画像の追加とは関係のないボタンから、ユーザーはアイコンの表示と非表示を切り替えることができます。新しい画像が追加され、アイコンが「表示」されます。アイコンを表示するか、ギャラリーの残りの部分と一致するようにアイコンを非表示にするかは、コールバックでわかりません。

//My button click function
$("#styleSwitcher #toggleIcons" ).click(function() {
$('.icons').slideToggle('slow');
//for Isotope to update the layout
$('#container').isotope('reLayout').data({iconStateIsHidden:$('.icons').is(":hidden")}); 
 return false;
 });



 //code I am working on to put in callback to test if div is open or closed



       if($("#container").data()[iconStateIsHidden])
          {
// newly added images should match the rest of the gallery
        $('.icons').hide(); 
          }     
        else
          {
// newly added images should match the rest of the gallery
        $('.icons').show(); 
          }
0
DefyGravity