javascript - Angularjs折叠导航栏必须点击两次才能打开

Question

我有一个折叠导航栏，它是通过在我的索引页面中使用 ng-include 放置的。出于某种原因，我必须单击两次才能打开折叠导航栏。我正在使用 w3schools 的导航栏 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown我完全使用了他们所拥有的，但它仍然需要我点击两次才能打开折叠的导航栏。 (之后它正常工作)控制台也没有错误。跟angularjs有关系吗？

导航栏 HTML:

      $scope.myFunction = function() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";
        }
      }

        .topnav {
          background-color: transparent;
        }

        .topnav a {
          display: inline-block;
          color: black;
          padding: 14px 16px;
          text-decoration: none;
          font-size: 16px;
        }


        .topnav .icon {
          display: none;
        }

        .dropdown {
          float: right;
          padding-top: 5px;
        }

        .hehe {
          float: right;
          padding-top:5px;
        }

         .dropdown .dropbtn {
            font-size: 17px;
            border: none;
            outline: none;
            color: black;
            padding: 14px 16px;
            background-color: inherit;
            font-family: inherit;
            margin: 0;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown-content a {
            float: none;
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }

         .topnav a:hover, .dropdown:hover .dropbtn {
          background-color: transparent;
          color: skyblue;
        }

         .dropdown-content a:hover {
            background-color: #ddd;
            color: black;
        }

         .dropdown:hover .dropdown-content {
            display: block;
        }

        @media screen and (max-width: 900px) {
          .topnav a:not(:first-child), .dropdown .dropbtn {
            display: none;
          }
          .topnav a:not(:first-child), .hehe {
            display: none;
          }
         .topnav a.icon {
            float: right;
            display: block;
          }
        }

        @media screen and (max-width: 900px) {
         .topnav.responsive {position: relative;}
          .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
          }
          .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
          }
          .topnav.responsive .dropdown {float: none;}
          .topnav.responsive .hehe {float: none;}
          .topnav.responsive .dropdown-content {position: relative;}
          .topnav.responsive .dropdown .dropbtn {
            display: block;
            width: 100%;
            text-align: left;
          }
          .topnav.responsive .hehe {
            display: block;
            width: 100%;
            text-align: left;
          }
        }

 <div class="topnav" id="myTopnav" ng-controller="searchController">
        <div class="hehe">
          <a href="">Developer</a>
          <a href="">Data Enquiry</a>
        </div>
          <div class="dropdown">
            <button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button>
            <div class="dropdown-content" >
              <a ng-click="pickCate(x)" ng-repeat="x in selectCate">{{ x }}</a>
            </div>
          </div>
          <a href="" style="font-size:15px; padding-top:20px;" class="icon" ng-click="myFunction()">&#9776;</a>
        </div>

Answer 1

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" ng-click="myFunction()">&#9776;</a>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav with Dropdown</h2>
  <p>Resize the browser window to see how it works.</p>
  <p>Hover over the dropdown button to open the dropdown menu.</p>
</div>

JS:

 $scope.myFunction = function() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
  }

在我的代码中一切正常，导航栏在第一次点击后打开柱塞:http://plnkr.co/edit/zYys9aGUyuvrlSdVknJx?p=preview