javascript - 可点击的 div 标签使用 not() 该 div 内的任何 div 标签

Question

一个非常没有吸引力的标题，但我不确定其他人如何解释它。

我有以下代码，它是我的导航栏。每个“组”都是一个带有下拉菜单的选项。如果您想直观地查看此内容，可以在 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>

我希望用户点击 .outside、.inside 或 .circle 并找出它必须使用哪个 index() 然后找到它的链接，然后使用一些不错的方法重定向或滑入jQuery 效果。这是一个例子:

var _0 = "portfolio.php";
var _1 = "showcase.php"; //etc...

//below within $(document).ready() {
$(".group div").not(".sub").click(function() {
  alert($(this).index()); //or find the appropriate page using the variables above
});

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

Answer 1

只是不要对具有 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
});