Question

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

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

但是，我还有一些带有下拉子菜单的菜单项，并且它们分配了Bootstrap类.dropdown。我希望上面的函数免除这些下拉菜单项。为此，我想检索被点击项目的类，以便决定是否折叠导航栏。

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

$('.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>

Answer 1

在jQuery中，你可以这样做：

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

在普通JS中等于className：

event.target.className;

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

＆＃13;

$('.nav').click('li', function(e) {
  alert(e.target.parentElement.className);
});

＆＃13;

<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>

＆＃13;

获取在jQuery中单击元素的类

1 个答案: