javascript - 탐색 막대 전환 단추에 축소 된 요소가 표시되지 않습니다

네비게이션 높이 (50px)를 제한하여 데이터가 제대로 확장되지 않는 잘못된 데이터 타겟 속성과 CSS 규칙이 있습니다. 그리고 부모 요소는 div가 아닌 탐색해야한다고 생각합니다.

대신 사용해보십시오 :

<!-- NAVIGATION BAR -->
<nav class="navbar navbar-default navbar-static-top navbar-inverse">
  <div class="container">
    <!-- BRAND, BUTTON -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navilinks" aria-expanded="false">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src="./newnewfoy.png">
      </a>
    </div>
    <!-- NAV LINKS -->
    <div class="navbar-collapse collapse" id="navilinks">
      <ul class="nav navbar-nav" >
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Event</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Volunteer</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Sponsors</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Contact</a>
        </li>
      </ul>
      <div class="medialinks hidden-sm hidden-xs">
        <a id="YOUcon" class = "mediacon" href="www.google.com"></a>
        <a id="IGcon" class = "mediacon" href="www.google.com"></a>
        <a id="TWTcon" class = "mediacon" href="www.google.com"></a>
        <a id="FBcon"  class="mediacon" href="www.google.com"></a>
      </div>
    </div>
  </div>
</nav>

https://codepen.io/anon/pen/oevYvp

이것인지 확실하지 않지만 플러그인을 추가 했습니까? (이미지 참조)

코드 펜에서 몇 줄을 수정했습니다. 코드와 트릭을 수행하는 것 같습니다. 데이터 타겟을 클래스에서 #navbar의 ID로 변경 한 다음 #NAV 링크의 초기 div를 #navbar의 ID를 포함하도록 업데이트했습니다. 나는 당신을 위해 당신의 코드 펜을 포크했습니다. https://codepen.io/ckroll17/pen/qXWqbV

<!--           
      Changed button to data-target to #navbar
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-nav"> -->
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <img src="./newnewfoy.png">
          </a>
        </div>
        <!-- NAV LINKS -->
        <!-- Added an id of navbar to the class directly below -->
        <div id="navbar" class="navbar-collapse collapse">