如何为子元素应用切换

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>