AngularJS 1.69 + Bootstrap 3.37下拉列表加载异常问题求助

Hey there, let's work through these two frustrating issues you're hitting with AngularJS 1.6.9 and Bootstrap 3.3.7's nested dropdown component!

This usually boils down to either incorrect component initialization, load order conflicts, or unintended CSS overrides. Here's how to fix it:

• Verify script load order: Bootstrap's JavaScript components depend entirely on jQuery, so make sure your script tags follow this exact order in your index.html:

  <script src="path/to/jquery.min.js"></script>
  <script src="path/to/angular.min.js"></script>
  <script src="path/to/bootstrap.min.js"></script>
  

  If jQuery loads after Bootstrap, the dropdown toggle logic won't attach properly, leaving the menu stuck open.

• Double-check your dropdown HTML structure: Bootstrap's nested dropdown requires specific nesting to work. Your code should look something like this (pay attention to the dropdown-submenu class for the secondary menu):

  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Main Menu <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li class="dropdown-submenu">
        <a href="#">请求 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">请假</a></li>
          <li><a href="#">权限申请</a></li>
          <li><a href="#">休假</a></li>
          <li><a href="#">委托</a></li>
        </ul>
      </li>
    </ul>
  </div>
  

  Missing the dropdown-submenu class on the parent <li> of the secondary menu is a common culprit here.

• Check for CSS conflicts: Open your browser's DevTools (F12) and inspect the .dropdown-menu element. Look for any custom CSS that's forcing display: block instead of the default display: none from Bootstrap. If you find one, adjust the selector specificity or override it with:

  .dropdown-menu {
    display: none !important;
  }
  

  (Only use !important as a last resort—prefer fixing the conflicting selector instead.)

• Rule out AngularJS directive conflicts: If you have a custom AngularJS directive named dropdown, it might be clashing with Bootstrap's built-in functionality. Rename your custom directive to something unique (like appDropdown) to avoid overlap.

This is almost always an AngularJS routing quirk—here's how to stop the unwanted redirect:

• Avoid empty href="#" for non-navigation links: AngularJS treats # as the root route anchor, so clicking <a href="#"> will default to your app's homepage. Replace empty href values with one of these options:

  • For links that trigger actions (not navigation): Use href="javascript:void(0)" or add ng-click with $event.preventDefault():

    <li><a href="javascript:void(0)" ng-click="handleLeaveRequest()">请假</a></li>
    

    Or in your controller:

    $scope.handleLeaveRequest = function($event) {
      $event.preventDefault();
      // Your request logic here
    };
    

  • For links that should navigate to an AngularJS route: Use ng-href with your target route instead of plain href:

    <li><a ng-href="#/leave-request">请假</a></li>
    

    Just make sure your $routeProvider has a corresponding route defined:

    $routeProvider.when('/leave-request', {
      templateUrl: 'leave-request.html',
      controller: 'LeaveRequestController'
    });
    

• Check for global click handlers: If you have any jQuery or AngularJS code that listens to all <a> tag clicks (e.g., $('a').click(...)), it might be hijacking the submenu clicks and forcing a redirect. Audit your codebase for such global handlers and adjust them to exclude dropdown links.

• Test with Bootstrap's dropdown events: Bootstrap emits show.bs.dropdown and hide.bs.dropdown events when the dropdown toggles. You can add a listener to ensure no unintended logic is triggering redirects:

  $('.dropdown-submenu').on('click', function(e) {
    e.stopPropagation(); // Prevent parent dropdown from closing unexpectedly
    // Add debug logs here to check if the click is being intercepted
  });
  

• Open your browser's DevTools Console to check for any JavaScript errors—missing dependencies or syntax issues often cause these weird behaviors.
• Use the Network tab to see what URL is being requested when you click the submenu items—this will confirm if it's a route redirect or a different issue.

内容的提问来源于stack exchange，提问作者Raul Florin Musteaţă