2016-05-08 12 views
0

プレーンなHTMLとjQueryを使用してツリー構造を作成しようとしています。私はそれまでこれを作っていましたが、小さな問題があります:子要素を持つ要素が表示されない理由は分かりませんが、箇条書きをクリックするか、名前が必要な場所に子供がいる表示され、親カテゴリも表示されます。ここでjQueryツリーメニュー - 親カテゴリが表示されない

は私のコードです:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('li') 
       .css('pointer','default') 
      $('li:has(ul)') 
       .click(function(event){ 
        if (this == event.target) {      
         $(this).children().toggle('slow'); 
        } 
        return false; 
       })    
       .children().hide(); 
      $('li:not(:has(ul))').css({cursor:'default'}); 
     }); 
    </script> 
</head> 
<body> 
    <ul> 
     <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li> 
     <li><a href="#">Aliquam ultricies neque vel efficitur luctus. 
      <ul> 
       <li><a href="#">Aenean quis sapien ultrices, convallis mauris ut, vestibulum dolor.</a></li> 
       <li><a href="#"> 
        Aliquam ac lectus vehicula, imperdiet orci a, gravida dolor. 
        <ul> 
         <li><a href="#">Donec eu sapien eu ante euismod elementum.</a></li> 
         <li><a href="#">Donec eu urna non nulla dapibus porttitor. 
          <ul> 
           <li><a href="#">Nulla dignissim felis eu risus posuere, ac venenatis nunc sagittis.</a></li> 
           <li><a href="#">Fusce ac nibh facilisis, iaculis velit vestibulum, scelerisque diam.</a></li> 
          </ul> 
         </a></li> 
        </ul> 
       </a></li> 
      </ul> 
     </a></li> 
     <li><a href="#">Cras ornare libero in massa lobortis bibendum.</a></li> 
    </ul> 
</body> 
</html> 

私もfiddleを作成しました。

ありがとうございます。

答えて

1

jQueryの子関数に問題があります。パラメータなしでこの関数を呼び出すと、すべての子要素の変更が適用されます。この場合は、テキストコンテンツを持つ<a>タグが<li>という子要素であるため、.children("ul")のようなパラメータでchildren関数を使用する必要があるため、問題があります。完全な実例はhereです。

+0

それを加えて問題を解決しました。ありがとうございました。 – Cosmin

+0

ユーザーがa hrefをクリックしているときに、同じような動作を可能にする方法についての理想はありますか? – Cosmin

+0

私はあなたが "a"タグを削除する必要があり、それは魅力のように動作すると思います。私はあなたがここで見ることができる謎を更新しました:https://jsfiddle.net/kow62nmd/1/ –

関連する問題