如何為子元素應用切換

Question

當我點擊按鈕時，整個側邊欄都在切換，但我只需要側邊菜單來切換。 HTML部分

<nav id="sidebar">
    <div class="sidebar-header">
         <img src="/fintantra/images/logo.jpg" style="margin-left:4px;">
               <div class="btn-group">
                .....
                ......
    <ul class="list-unstyled components" id="demo">
           <li>
              <a href="#adminSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                  <i class="fas fa-user"></i>&nbsp;
                     FDR
                </a>
             <ul class="collapse list-unstyled" id="adminSubmenu">
                  <li>
                      <a href="fpo-profile.html"><i class="fa fa-arrows-alt" aria-hidden="true"></i>&nbsp;FPO Profile</a>
                   </li>
                        ....
              </ul>
             </li>
              <li>
                  <a href="#fisSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                        <i class="fas fa-user"></i>&nbsp;
                        FIS
                  </a>
                    <ul class="collapse list-unstyled" id="fisSubmenu">
                  <li>
                      <a href="fpo-profile.html"><i class="fa fa-arrows-alt" aria-hidden="true"></i>&nbsp;FPO Profile</a>
                   </li>
                        ....
              </ul>
              </li>
              ...
        </ul>
</nav>
<button type="button" id="sidebarCollapse" class="btn btn-info">
            <i class="fas fa-align-left"></i>&nbsp;&nbsp;&nbsp;&nbsp;
            <span>KANCHI</span>
            </button>

JS部分

<script type="text/javascript">
        $(document).ready(function () {
            $('#sidebarCollapse').on('click', function () {
                $('#sidebar').toggleClass('active');
            });
        });
    </script>

上面的代碼適用於整個側邊欄，當我用 ('#demo') 替換 ('#sidebar') 時，它不會切換。 我在菜單 ul 部分使用演示作為 id。

Answer 1

<script type="text/javascript">
        $(document).ready(function () {
            $('#sidebarCollapse').on('click', function () {
                $('#demo').toggleClass('active');
            });
        });
</script>

Answer 2

<script type="text/javascript">
        $(document).ready(function () {
            $('#sidebarCollapse').on('click', function () {
                $('#demo').toggle();
            });
        });
</script>