javascript - 如何在导航中选择元素

Question

<!-- /.navbar-top-links -->

        <div class='navbar-default sidebar' role='navigation'>
            <div class='sidebar-nav navbar-collapse'>
                <ul class='nav' id='side-menu'>
                    <li class='sidebar-search'>
                        <div class='input-group custom-search-form'>
                            <input type='text' class='form-control' placeholder='Search...'>
                            <span class='input-group-btn'>
                            <button class='btn btn-default' type='button'>
                                <i class='fa fa-search'></i>
                            </button>
                        </span>
                        </div>
                        <!-- /input-group -->
                    </li>
                    <li>
                        <a href='index.php'><i class='fa fa-dashboard fa-fw'></i> Home</a>
                    </li>
                    <li class=''>
                        <a href='#'><i class='fa fa-bar-chart-o fa-fw'></i> Pages<span class='fa arrow'></span></a>
                        <ul class='nav nav-second-level collapse' aria-expanded='false' style='height: 0px;'>
                    <li><a href="/seattle.php">Seattle</a></li>
                    <li><a href="/new-york.php">New York</a></li>
                    <li><a href="/london.php">London</a></li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>

我尝试使用此 jQuery $("").click(function(e) 选择西雅图或伦敦等下 zipper 接，但我不能。

请帮忙

Answer 1

定位第二级导航:

$('.nav-second-level li').on('click', 'a', function(){
       //do your thing here
      var text = $(this).text();
      alert(text );
 });

$('.nav-second-level li').on('click', 'a', function() {
  //do your thing here
  var text = $(this).text();
  alert(text);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='navbar-default sidebar' role='navigation'>
  <div class='sidebar-nav navbar-collapse'>
    <ul class='nav' id='side-menu'>
      <li class='sidebar-search'>
        <div class='input-group custom-search-form'>
          <input type='text' class='form-control' placeholder='Search...'>
          <span class='input-group-btn'>
                            <button class='btn btn-default' type='button'>
                                <i class='fa fa-search'></i>
                            </button>
                        </span>
        </div>
        <!-- /input-group -->
      </li>
      <li>
        <a href='index.php'><i class='fa fa-dashboard fa-fw'></i> Home</a>
      </li>
      <li class=''>
        <a href='#'><i class='fa fa-bar-chart-o fa-fw'></i> Pages<span class='fa arrow'></span></a>
        <ul class='nav nav-second-level collapse' aria-expanded='false' style='height: 0px;'>
          <li><a href="#">Seattle</a>
          </li>
          <li><a href="#">New York</a>
          </li>
          <li><a href="#">London</a>
          </li>
        </ul>
        <!-- /.nav-second-level -->
      </li>
    </ul>
  </div>
  <!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>