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をクリックすると何かが発生しますが、同時に、他のdiv内にある場合でも、.subをクリックして何も起こらないようにします。CSSではそれらがそれらのdivタグ内にある必要がありますが、視覚的には、CSSを使用してdivタグから削除されるため、同じ場所をクリックすることはありません。

4

2 に答える 2

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
});
于 2012-07-13T23:47:25.947 に答える
1

より具体的なセレクターを使用する必要があります。

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

また

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

これにより、.inner、.outer、および.circleのみがクリック可能になります。

于 2012-07-14T00:04:02.177 に答える