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，然后找出它有哪个索引（）然后找到它的链接，然后将使用一些不错的重定向或滑入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

请不要为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
});

Answer 2

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

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

或

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

这只会使.inner，.outer和.circle可点击。

可点击的div标签使用not（）div内的任何div标签

2 个答案: