1

このナビゲーションのカテゴリ3にサブカテゴリのドロップダウンを追加する方法を理解しようとしています。たとえば、3つのサブカテゴリを考えてみましょう。私はたくさんの方法を試しましたが、それを理解できないようです。したがって、基本的に、カテゴリ3をクリックすると、その下にさらに3つのリンクが表示されます。誰かがそのコーディングを追加するのを手伝ってもらえますか？これは、1つのhtmlドキュメントのコード全体です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>-</title>
<style TYPE="text/css"> 
a:link, a:visited, a:hover, a:active {
    color: #000;
    text-decoration: none;
}
#trigger {
    line-height: 50px;
    float: right;
    height: 50px;
    font-size: 1.2em;
}
a.menu-link {
    float: right;
    display: block;
    padding-right: 0.5em;
    padding-left: 0.5em;
    margin-right: 1em;
    color: #000;
}
nav[role=navigation] {
    clear: both;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.js nav[role=navigation] {
    overflow: hidden;
    max-height: 0;
}
nav[role=navigation].active {
    max-height: 18em;
}
nav[role=navigation] ul {
    margin: 0;
    padding: 0;
    border-top: 1px solid #000;
}
nav[role=navigation] li a {
    display: block;
    padding: 0.8em;
    border-bottom: 1px solid #000;
    font-size: .875em;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/Javascript">
$(document).ready(function() {
  $('body').addClass('js');
  var $menu = $('#menu'),
    $menulink = $('.menu-link');

$menulink.click(function() {
  $menulink.toggleClass('active');
  $menu.toggleClass('active');
  return false;
});});
</script>
</head>

<body>
<div id="trigger"><a href="#menu" class="menu-link">Menu</a></div>
</div>
<nav id="menu" role="navigation">
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
<li><a href="#">Category 6</a></li>
</ul>
</nav>
</body>
</html>
4

2 に答える 2

2

以前投稿した JSFiddle を使ってみました。html 要素に別<ul>の要素を追加し、css コードを追加してデフォルトで非表示にし、jquery 関数を Category3 クリック関数に追加して、新しい<ul>ショー自体を作成しました。

http://jsfiddle.net/ApNhK/1/

おそらく最良の解決策ではありません。追加オプションのいずれかをクリックすると、すべての追加オプションメニューが非表示になるため、いくつか変更する必要があると思います. しかし、これはおそらくあなたがそれについて行くことができる1つの方法のアイデアを与えるでしょうか?

于 2012-12-24T18:55:50.070 に答える
1

これは、あなたの望むことですか？

$('#menu ul li:eq(2)').click(function(){ 
    if($(this).children("a").size()==1){
        $(this).append("<a href='#'>subcategory 1</a>");
        $(this).append("<a href='#'>subcategory 2</a>");
        $(this).append("<a href='#'>subcategory 3</a>");
    }
});​​

JsFiddle の例: http://jsfiddle.net/ApNhK/3/

于 2012-12-24T18:54:56.503 に答える