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を作成しました。
ありがとうございます。
それを加えて問題を解決しました。ありがとうございました。 – Cosmin
ユーザーがa hrefをクリックしているときに、同じような動作を可能にする方法についての理想はありますか? – Cosmin
私はあなたが "a"タグを削除する必要があり、それは魅力のように動作すると思います。私はあなたがここで見ることができる謎を更新しました:https://jsfiddle.net/kow62nmd/1/ –