1

一个非常没有吸引力的标题，但我不知道如何解释它。

我有以下代码，这是我的导航栏。每个“组”都是一个带有下拉菜单的选项。如果您想直观地查看此内容，可以在 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 标签中删除的，因此您不会在同一个地方单击。

4

2 回答 2

1

you should use a more specific selector:

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

or

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

This will make only .inner, .outer, and .circle clickable.

于 2012-07-14T00:04:02.177 回答
1

只是不要为那些有子类的人做任何事情。像这样：

//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
});
于 2012-07-13T23:47:25.947 回答