slideToggle（）スケールダウン後に関数が機能しない

Question

私のコードの中に混乱したバグがあり、それを修正する方法がわかりません。私は現在のウィンドウのサイズに応じてスクリプトを呼び出す、主な機能を得ました。

モバイルデバイスの場合、モバイルデバイスで表示すると機能するslideToggle()という機能があります。しかし、600pxより上に開くと、機能が縮小されますが、slideToggle();は機能しなくなります。

display: block;に設定してすぐにdisplay: none;に再度設定します。私slideToggle();は、次のように埋め込まれている：

$('.box-header').on('click', function() { 
    $(this).parent().toggleClass('folded').toggleClass('unfolded'); 
    $(this).next('div').stop().slideToggle(); 
    console.log('clicked'); 
}); 

JSFIDDLE DEMO

は、ウィンドウサイズが600PXの上にある間、ページをロードするための重要なデモを見て、問題を再現するためにスケールダウンよりも、ときに。時にはうまくいきます。

私には何が欠けていますか？また、リサイズイベント後にビューアビューポートに応じてスクリプトを強制終了して呼び出す方が良いでしょうか？

Answer 1

クリックイベントであれば入れてください：

$('.box-header').on('click', function() { 
    if ($(window).width() < 600) { 
     $(this).parent().toggleClass('folded unfolded'); 
     $(this).next('div').stop().slideToggle(); 
    } else { 
     //for other code here for medium+large screens 
    } 
    }); 

https://jsfiddle.net/5puqn9ts/1/

も、各

$(document).ready(function() { 

    $('body').on('click', '.mobile', function() { 
     $(this).parent().toggleClass('folded').toggleClass('unfolded'); 
     $(this).next('div').stop().slideToggle(); 
     console.log('clicked'); 
    }); 


    // init scripts for smartphone or desktops 
    var initScripts = function() { 
    if ($(window).width() < 600) { 
     $('.box-header').addClass('mobile'); 
    } 
    if ($(window).width() >= 600) { 
     $('.box-header').removeClass('mobile'); 
     /add class for medium screen then bind event to ti 
    } 
    } 
    initScripts(); 

    var id; 
    $(window).resize(function() { 
    initScripts() 
    }); 
}); 

にクリックイベントをバインドし、モバイルと大画面を切り替えるには、クラスを使用しますhttps://jsfiddle.net/75186j96/5/

Answer 2

質問にお答えするには、 slideToggle()ターゲットを.box-contentに変更する必要があります。divではなく、.box-headerに切り替えが適用されます。また、あなたのクラストグルリングをバンドルすることもできます。

結果のコードは以下のようになります：

$('.box-header').on('click', function() { 
    $(this).parent().toggleClass('folded unfolded'); 
    $(this).next('.box-content').stop().slideToggle(); 
    console.log('clicked'); 
}); 

言われていること、これを行うのより良い方法があります。 あなたはこのように、.box-contentの外観に、あなたのクラスを結ぶことができます：

.box-content { 
    transition: height 300ms; 
    overflow: hidden; 
} 

.box.folded .box-content { 
    max-height: 0; 
} 

.box.unfolded .box-content { 
    max-height: 300px; 
} 

Answer 3

あなたの関数は、呼び出しごとにイベントを設定します。この正しい選択肢を試してみてください：あなたが不足しているもの

var smartphoneFunctions = $('.box-header').on('click', function() { 
    $(this).parent().toggleClass('folded').toggleClass('unfolded'); 
    $(this).next('div').stop().slideToggle(); 
    console.log('clicked'); 
}); 

https://jsfiddle.net/75186j96/8/