toggleClassは以前のクリックイベントjqueryを保持していません

Question

表示/非表示機能here（私の仕事ではありませんが、私の問題は似ていません）、それに基づいてフィドルのデモ（https://jsfiddle.net/q7sfeju9/）を作成しましたが、行を表示します。

最初にLevel 1.2を隠すと、Level 1.1と最後にLevel 1が正常に機能します。ここでLevel 1を再度クリックすると、すべてのサブレベルではなく、Level 1.1とLevel 1.2のみが表示されます。しかし、それはすべてのレベルとサブレベルを示しています。サブレベルを隠すと、そのレベルがクリックされるまで隠す必要があります。

どうすればいいですか？事前に

おかげ

更新：

以下のコードを参照してください -

$('tr').click(function(event) { 
 
    event.stopPropagation(); 
 
    var currentLevel = parseInt($(this).attr('class')), 
 
    state = $(this).hasClass('hiding'), 
 
    nextEl = $(this).next(), 
 
    nextLevel = parseInt(nextEl.attr('class')); 
 
    while (currentLevel < nextLevel) { 
 
    nextEl.toggle(state); 
 
    nextEl = nextEl.next(); 
 
    nextLevel = parseInt(nextEl.attr('class')); 
 
    } 
 
    $(this).toggleClass('hiding'); 
 
});

tr[class^="2"] td { 
 
    padding-left: 20px; 
 
} 
 

 
tr[class^="3"] td { 
 
    padding-left: 40px; 
 
} 
 

 
tr[class^="4"] td { 
 
    padding-left: 60px; 
 
}

<table id="test"> 
 
    <tr class="1"> 
 
    <td>Level 1</td> 
 
    </tr> 
 
    <tr class="2"> 
 
    <td>Level 1.1</td> 
 
    </tr> 
 
    <tr class="3"> 
 
    <td>Level 1.1.1</td> 
 
    </tr> 
 
    <tr class="3"> 
 
    <td>Level 1.1.2</td> 
 
    </tr> 
 
    <tr class="2"> 
 
    <td>Level 1.2</td> 
 
    </tr> 
 
    <tr class="3"> 
 
    <td>Level 1.2.1</td> 
 
    </tr> 
 
    <tr class="3"> 
 
    <td>Level 1.2.2</td> 
 
    </tr> 
 
    <tr class="4"> 
 
    <td>Level 1.2.2.1</td> 
 
    </tr> 
 
    <tr class="4"> 
 
    <td>Level 1.2.2.1</td> 
 
    </tr> 
 
    <tr class="1"> 
 
    <td>Level 2</td> 
 
    </tr> 
 
    <tr class="2"> 
 
    <td>Level 2.1</td> 
 
    </tr> 
 
    <tr class="3"> 
 
    <td>Level 2.1.1</td> 
 
    </tr> 
 
    <tr class="3"> 
 
    <td>Level 2.1.2</td> 
 
    </tr> 
 
</table>

Answer 1

他/場合は、子どもたちが何であるかの状態をチェックし、使用する必要がありますが必要に応じて切り替えます。

以下は、適切な動作をしていますか？私が理解しているように、レベルが拡張されると、直接的なサブレベルのみが表示されます。

コードスニペット

$('tr').click(function(event) { 
 
    event.stopPropagation(); 
 
    var currentLevel = parseInt($(this).attr('class')), 
 
    state = $(this).hasClass('hiding'), 
 
    nextEl = $(this).next(), 
 
    nextLevel = parseInt(nextEl.attr('class')); 
 
    while (currentLevel < nextLevel) { 
 
    nextEl.toggle(); 
 
    nextEl = nextEl.next(); 
 
    nextLevel = parseInt(nextEl.attr('class')); 
 
    } 
 
    $(this).toggleClass('hiding'); 
 
    hideChildren() 
 
}); 
 

 
// the below function ensures that the children of the previously clicked row remain hidden 
 
function hideChildren() { 
 
$(".hiding").each(function() { 
 
var currentLevel = parseInt($(this).attr('class')), 
 
nextEl = $(this).next(), 
 
    nextLevel = parseInt(nextEl.attr('class')); 
 
    while (currentLevel < nextLevel) { 
 
     nextEl.hide(); 
 
    nextEl = nextEl.next(); 
 
    nextLevel = parseInt(nextEl.attr('class')); 
 
    } 
 
}) 
 
}

tr[class^="2"] td { 
 
    padding-left: 20px; 
 
} 
 
tr[class^="3"] td { 
 
    padding-left: 40px; 
 
} 
 
tr[class^="4"] td { 
 
    padding-left: 60px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <table id="test"> 
 
     <tr class="1"> 
 
     <td>Level 1</td> 
 
     </tr> 
 
     <tr class="2"> 
 
     <td>Level 1.1</td> 
 
     </tr> 
 
     <tr class="3"> 
 
     <td>Level 1.1.1</td> 
 
     </tr> 
 
     <tr class="3"> 
 
     <td>Level 1.1.2</td> 
 
     </tr> 
 
     <tr class="2"> 
 
     <td>Level 1.2</td> 
 
     </tr> 
 
     <tr class="3"> 
 
     <td>Level 1.2.1</td> 
 
     </tr> 
 
     <tr class="3"> 
 
     <td>Level 1.2.2</td> 
 
     </tr> 
 
     <tr class="4"> 
 
     <td>Level 1.2.2.1</td> 
 
     </tr> 
 
     <tr class="4"> 
 
     <td>Level 1.2.2.1</td> 
 
     </tr> 
 
     <tr class="1"> 
 
     <td>Level 2</td> 
 
     </tr> 
 
     <tr class="2"> 
 
     <td>Level 2.1</td> 
 
     </tr> 
 
     <tr class="3"> 
 
     <td>Level 2.1.1</td> 
 
     </tr> 
 
     <tr class="3"> 
 
     <td>Level 2.1.2</td> 
 
     </tr> 
 
    </table>

EDIT：OPの明確化に係る行動を修正しました。私は、私が書いた最も美しいコードではないが、それがうまくいくことを認めている。