可點擊的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

只是不要爲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點擊。