获取在 jQuery 中单击的元素的类

Getting the class of the element being clicked in jQuery

本文关键字：元素 单击 jQuery 获取      更新时间：2023-09-26

我有一个jQuery代码段，当单击菜单项时，它会折叠响应式navbar（在移动模式下）。

$('.navbar-fixed-top').click('li', function() {
    $('.navbar-collapse').collapse('hide');
});

但是，我也有几个带有下拉子菜单的菜单项，并且它们.dropdown分配给它们的 Bootstrap 类。我希望上述函数免除这些下拉菜单项。为此，我想检索正在单击的项目的类，以便决定是否折叠导航栏。

我试过这个，但它没有输出任何东西。

$('.navbar-fixed-top').click('li', function() {
    console.log($(this).class);
    $('.navbar-collapse').collapse('hide');
});

我也尝试过这个，结果类似。

$('.navbar-fixed-top').click('li', function(event) {
    console.log(event.target.class);
    $('.navbar-collapse').collapse('hide');
});

我还能尝试什么？现在，甚至在用户有机会看到子项之前，在移动设备上点击下拉菜单项时，我的导航栏就会崩溃，这就是我试图补救的。

如果有人想看一看，这里是 HTML：

<ul class="nav navbar-nav pull-right">
    <li ng-class="{ active: isActive('/about')}"><a onClick="pagetop()" href="#about">ABOUT</a></li>
    <li ng-class="{ active: isActive('/blog')}"><a onClick="pagetop()" href="#blog">BLOG</a></li>
    <li><a onClick="pagetop()" href="#">PREMIUM</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">RESOURCES<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
        </ul>
    </li>
    <li><a href="javascript:;" onClick="centerAlignModal()" data-target="#contact" data-toggle="modal">CONTACT</a></li>
</ul>

在 jQuery 中，你可以执行以下操作： 

$(this).attr('class');

等于纯 JS 中的类名： 

event.target.className;

由于target引用锚点，因此需要其父级的类（即 li 元素）。尝试单击此处的前两项（为它们添加了虚拟类）：

$('.nav').click('li', function(e) {
  alert(e.target.parentElement.className);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
  <li class="aboutClass" ng-class="{ active: isActive('/about')}"><a href="#about">ABOUT &lt;--- click me</a>
  </li>
  <li class="blogClass" ng-class="{ active: isActive('/blog')}"><a href="#blog">BLOG &lt;--- click me</a>
  </li>
  <li><a onClick="pagetop()" href="#">PREMIUM</a>
  </li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">RESOURCES<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a>
      </li>
      <li><a href="#">Another action</a>
      </li>
      <li><a href="#">Something else here</a>
      </li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a>
      </li>
      <li role="separator" class="divider"></li>
      <li><a href="#">One more separated link</a>
      </li>
    </ul>
  </li>
  <li><a href="javascript:;" onClick="centerAlignModal()" data-target="#contact" data-toggle="modal">CONTACT</a>
  </li>
</ul>

相关文章：