toggleClass display：none将初始加载设置为display：none

Question

我正在使用.fold类切换所选目标，该类显示：none。

在window.load上，我选择了目标和addClass（＆＃39; fold＆＃39;），以便最初不显示目标。

然而，当切换时，显示不会保持在css指定的边距内。

如果我不首先尝试隐藏目标，则toggleClass可以工作（遵循原始显示规则）。

我还试过addClass（＆＃39; fold＆＃39;），然后是toggleClass（＆＃39;展开＆＃39;）。这导致切换不起作用。

的CSS：

.unfold{
display: block;
}
.fold {
    display: none;
}

$(function(){
$('.octothorpe').on({
    click:function(e){     
        e.preventDefault();
        var $pfold = $(this).closest('.octowrap').siblings('p');
        var $cfold = $(this).closest('.docs').siblings('.code');
        var $sector = $(this).closest('.section');
        var $h2 = $sector.nextUntil('.section:has(h2)').slice(0,-1);

        $pfold.toggleClass('fold');   
        $cfold.toggleClass('fold');   
        $h2.toggleClass('fold');

    }});
});

//on page load click all octothorpe
$(window).load( function() {
        var $pfold = $('.octothorpe').closest('.octowrap').siblings('p');
        var $cfold = $('.octothorpe').closest('.docs').siblings('.code');
        var $sector = $('.octothorpe').closest('.section');
        var $h2 = $sector.nextUntil('.section:has(h2)').slice(0,-1);

        $pfold.addClass('fold');        
        $cfold.addClass('fold');        
        $h2.addClass('fold');

});