2016-03-21 3 views
0

を使用して/アクティブ追跡クリックした記事を保管してください、私のHTML構造である:は、私は以下のオープンjQueryの親のUL Liと1つの問題に直面していますjQueryの

<div> 
    <ul> 
    <li class="has-sub"> 
     <a href="#">1</a> 
     <ul> 
      <li><a href="#">1.1</a></li> 
      <li><a href="#">1.2</a></li> 
      <li class="has-sub"> 
      <a href="#">2</a> 
      <ul> 
       <li><a href="#">2.1</a></li> 
       <li><a href="#">2.2</a></li> 
       <li class="has-sub"> 
        <a href="#">3</a> 
        <ul> 
         <li><a href="#">3.1</a></li> 
         <li><a href="#">3.2</a></li> 
         More... 
        </ul> 
       </li> 
      </ul> 
      </li> 
     </ul> 
    </li> 
    </ul> 
</div> 

のjQuery:

$(function() { 
    $('a').each(function() { 
    if ($(this).prop('href') == window.location.href) { 
     $(this).addClass('activation'); 
    } 
    }); 
}); 

CSS:

.open > a:after, 
.open > a:before { 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
transform: rotate(89deg);} 

activation class add、open parent ul li。

私はどのクラスがアクティブになっているかを知っていますが、この親はその時間を開いています。

このソリューションにはどのように到達できますか?

+2

あなたは何かに.openを適用しているようではありません。だから明らかにうまくいかないでしょう。開いているクラスにクラスを追加する必要があります。 .activationにもいくつかの開始コードがあります。あなたはそれを知らないので、私は知らないので – KyleK

+0

私は '$(this)).parent( 'ul')を追加しましたaddClass( 'open');'しかし動作しません –

答えて

0

あなたが求めるしようとしていたものですようだ:

$(function() { 
    $('a').click(function() { 
    if ($(this).prop('href') == window.location.href) { 

     $('li').removeClass('open'); 
     $('a').removeClass('activation'); 
     $(this).addClass('activation').closest("li").addClass("open"); 
    } 
    }); 
}); 

Here is the JSFiddle demo

を点検要素を介して構造を確認してください。

$(function() { 
    $('a').each(function() { 
    if ($(this).prop('href') == window.location.href) { 
     $(this).addClass('activation'); 
     $(this).parent().closest('.has-sub').addClass('open active'); 
    } 
    }); 
}); 

しかし、今第三の仕事だけでなく、第2の位置に働く:これが私の最後のjQueryのコードですDEMO

0

は、次のJSを使用する必要がありますまたは第4位

css:

.active { 
    display: block; 
} 
+0

私のデフォルトのCSSはhttps: /jsfiddle.net/oLsmwrL8/5/あなたのjsコードの後ろにコメントします。これを見てください –

+0

https://jsfiddle.net/dipali_vasani/oLsmwrL8/6/これをチェックしてください。それはあなたが必要とするものですか? –

0

取り組ん検索

$(function() { 
    $('a').removeClass('activation'); 
    $('ul').removeClass('open'); 
    $('a').each(function() { 
    if ($(this).attr('href') == '#') { //replace your url 
     $(this).addClass('activation'); 
     $(this).parent().parent().addClass('open'); 
    } 
    }); 
}); 

関連する問題