Как выбрать родителя для коллапса переключения данных?

Question

В основном я пытаюсь получить родителя data-toggle = "collapse".В настоящее время у моего navbar есть id = "sidebar".Я только хочу получить data-toggle = "collapse", которые находятся только внутри этой панели навигации.

Я попробовал следующее, но не сработало.

$ ('[# sidebar> data-toggle = collapse]'). Prop ('disabled', false);

<nav id="sidebar" class="nav flex-column">
        <div id="TitleSidebar" class="pt-2 pb-3 px-1 d-flex">
            <span id="sidelogo" class="mr-auto p-2">Logo</span>
            <button id="SideButtonOpenClose" type="button" class="btn btn-default" href="#" onclick="OpenCloseSideBar()">
                <span class="fas fa-align-justify" aria-hidden="true"></span>
            </button>
        </div>

        <!-- fIRST TAB -->
        <div id="FirstTitle" class="nav-item active " onclick="changeActiveTabs(event)">
            <a id="toggleDropDown" class="nav-link  px-0 toggle-arrow " data-toggle="collapse" href="#submenu1" aria-expanded="false">
                <div class="d-flex align-items-center justify-content-between ">
                    <span class="side-icons pl-3 pr-2 fas fa-home"></span>
                    <span class="sidebartitle text-nowrap mr-auto ">DashBoard</span>
                    <span class="downarrowicon mr-2 fas fa-angle-right"></span>
                </div>
            </a>
</div>

etc..

</nav>

Answer 1

Комбинатор > выбирает только непосредственных детей.И селекторы атрибутов должны быть в квадратных скобках, но не все выражение.Попробуйте это:

$('#sidebar [data-toggle=collapse]').prop('disabled', false); 

Пример:

// Returns one item.
console.log($('#sidebar [data-toggle=collapse]').length)

// Throws an error.
console.log($('[#sidebar > data-toggle=collapse]').length)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="sidebar" class="nav flex-column">
  <div id="TitleSidebar" class="pt-2 pb-3 px-1 d-flex">
      <span id="sidelogo" class="mr-auto p-2">Logo</span>
      <button id="SideButtonOpenClose" type="button" class="btn btn-default" href="#" onclick="OpenCloseSideBar()">
          <span class="fas fa-align-justify" aria-hidden="true"></span>
      </button>
  </div>

  <!-- fIRST TAB -->
  <div id="FirstTitle" class="nav-item active " onclick="changeActiveTabs(event)">
      <a id="toggleDropDown" class="nav-link  px-0 toggle-arrow " data-toggle="collapse" href="#submenu1" aria-expanded="false">
          <div class="d-flex align-items-center justify-content-between ">
              <span class="side-icons pl-3 pr-2 fas fa-home"></span>
              <span class="sidebartitle text-nowrap mr-auto ">DashBoard</span>
              <span class="downarrowicon mr-2 fas fa-angle-right"></span>
          </div>
      </a>
  </div>
</nav>