Javascript 可单击的div标记使用not（）该div内的任何div标记

一个相当不吸引人的标题，但我不知道其他人如何解释它

我有下面的代码，这是我的导航栏。每个“组”本质上都是一个下拉选项。如果您想直观地查看此内容，请访问www.titaniumwebdesigns.com

<nav>
  <ul>
    <div id="line"><img src="/images/nav/line.png" alt="" /></div>
    <li>
      <div class="group">
        <div class="outside"><div class="sub a media"></div></div>
        <div class="inside"><div class="sub b gallery"></div></div>
        <div class="circle selected"><div class="sub c showcase"></div></div>
      </div>
      <div class="text portfolio"></div>
    </li>
    <li>
      <div class="group">
        <div class="outside"><div class="sub a everything-else"></div></div>
        <div class="inside"><div class="sub b development"></div></div>
        <div class="circle"><div class="sub c design"></div></div>
      </div>
      <div class="text services"></div>
    </li>
    <li>
      <div class="group">
        <div class="outside"><div class="sub a the-company"></div></div>
        <div class="inside"><div class="sub b the-director"></div></div>
        <div class="circle"><div class="sub c employees"></div></div>
      </div>
      <div class="text about"></div>
    </li>
    <li>
      <div class="group">
        <div class="outside"><div class="sub a arrange-a-meeting"></div></div>
        <div class="inside"><div class="sub b get-in-touch"></div></div>
        <div class="circle"><div class="sub c support"></div></div>
      </div>
      <div class="text contact"></div>
    </li>
    <li>
      <div class="group">
        <div class="outside"><div class="sub a facebook"></div></div>
        <div class="inside"><div class="sub b twitter"></div></div>
        <div class="circle"><div class="sub c blog"></div></div>
      </div>
      <div class="text social"></div>
    </li>
  </ul>
  <div class="clear"></div>
</nav>

---

然而，它只是没有按照预期的方式工作。我知道.sub在所选的div中，但是有没有办法忽略这些div，即使它们在该div标记中？我想单击.outside、.inside、.circle，然后发生一些事情，但同时，我想单击.sub，而不发生任何事情，即使它们在其他div中。CSS要求它们位于这些div标记中，但从视觉上看，它们是使用CSS从div标记中删除的，因此您不会在同一个位置单击。

只需对带有class sub的对象不做任何操作。如下所示：

//below within $(document).ready() {
$(".group div:odd").click(function(e) {
  if ($(this).hasClass("sub"))
  {
    e.stopPropagation();
    return;
  }
  alert($(this).index()); //or find the appropriate page using the variables above
});

---

您应该使用更具体的选择器：

$(".group").children('div').click(...)

或

---

这将仅使.inner、.outer和.circle可单击。

此代码看起来很棒，但警报（）根本不会弹出。if语句中的警报效果很好，但之后的任何操作似乎都不起作用，可能是因为它仍在检测其他div标记中的.sub。我不确定，我无法让您的代码在JSFIDLE上进行测试。是否要我在JSFIDLE上创建一个包含完整代码的JSFIDLE链接？目前，该网站是titaniumwebdesigns.com。我敢打赌，如果你这样做了，我或其他人会很快给你答案。虽然这看起来是最好的解决方案，但我在一开始就尝试了这两种方法，但都无法正常工作。你确实意识到，通过键盘导航的用户完全无法访问这两种方法。如果您打算使用

div

而不是

a

至少添加

tabindex=0

，这样div就可以通过键盘聚焦，并添加一些视觉隐藏的文本，这样它们就知道自己在激活什么。谢谢您的评论，我知道目前这对键盘不太友好，但我会确保在主选项正常工作后添加所有辅助选项。当我有时间做那件事时，我会记住标签索引的事情！谢谢

$(".group").children('div').click(...)

$(".group > div").click(...)