0

カラフルなメニューを作ってみました。最上位ノードが赤であるとしましょう - その子も明るい赤になり、緑の最上位アイテムの下に - 明るい緑などになります。

色の配列 (暗い色と明るい色) とネストされたリスト オブジェクトがあります。

最上位の色付けは機能していますが、子オブジェクトで機能させることができません。

これは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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.mainMenu {
    float: left;
    width: 140px;
    margin-left:10px;

    list-style:none;

    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;

}
.mainMenu li a {
    display: block;
    padding: 10px 25px;
    background: #F90  ;
    margin-top:3px;

    text-decoration: none;
   color:#FFF;
   text-align:right;
}
.mainMenu li a:hover, .mainMenu li a.active {
    background: #999;
    color: #fff;
    list-style:none;
}
.mainMenu li ul {
   display: none; // used to hide sub-menus
   list-style:none;
   padding-left:3px;
}
.mainMenu li ul li a {
    padding: 2px 25px;
    background:#f7d8ba   ;
    border-bottom: 1px dotted #ccc;
    color:#000;
    font-size:12px;
    font-weight:normal;
    margin-top:4px;
}
</style>
</head>

<body>

<ul class="mainMenu">
    <li><a href="#">Board</a>
        <ul>
          <li><a href="#">Selling</a></li>
            <li><a href="#">Buying</a></li>
            <li><a href="#">Wanted</a></li>
            <li><a href="#">Dating</a></li>
        </ul>
    </li>

    <li><a href="#">Phone Book</a>
        <ul>
            <li><a href="#">Office</a></li>
            <li><a href="#">People</a></li>
            <li><a href="#">Marketing</a></li>
        </ul>
    </li>

    <li><a href="#">Schedual</a>
        <ul>
             <li><a href="#">Busses</a></li>
            <li><a href="#">Pharmacy</a></li>
            <li><a href="#">Other</a></li>  
        </ul>  
    </li>

  <li><a href="#">Another</a></li>
      <li><a href="#">One</a></li>
       <li><a href="#">Here</a></li>
</ul>   

</body>
</html>

これはJqueryです：

<script>

var colorsDarkTable = ["#f6921e","#c0272d","#8bc53f","#006837","#29aae1","#2959e1"];
var colorsLightTable = ["#f7d8ba","#f6d5d6","#e8f3d9","#cdeadc","#d4eef9","#d4def9"];

$(document).ready(function () {
  $('.mainMenu > li > a').hover(function(){

    if ($(this).attr('class') != 'active'){
        $('.mainMenu li ul').slideUp();
        $(this).next().css("listStyle","none");
        $(this).next().slideToggle();
        $('.mainMenu li a').removeClass('active');
        $(this).addClass('active');
    }
  });

        $("ul.mainMenu>li>a").each(function() {
                var $parentLi = $(this).parent()
                var myIndex = $parentLi.index();

        // This is working!      
        $(this).css("backgroundColor", colorsDarkTable[myIndex]);

        // This sub loop isn't working ***
        $(this).children("li>a").each(function(index) {
           $(this).parent().css("backgroundColor",colorsLightTable[myIndex]);
        });
     });
});
</script>

ここにデモがあります: http://www.dvirad.co.il/test.html

4

2 に答える 2

0 
// This sub loop is now working ***
    console.log($(this).parent().children("ul").find("li a"))
    $(this).parent().children("ul").find("li a")
                             .css("backgroundColor", colorsLightTable[myIndex])

http://jsfiddle.net/52QDc/1/

背景の修正:

.mainMenu li a:hover, .mainMenu li a.active {
    background: #999 !important;
}
于 2012-05-16T20:42:59.683 に答える
0

このビット:は、$(this).children("li>a")子を持たない です。this<a>

が必要$(this).parent().children("li>a")です。

アップデート

これはおそらくあなたが望むものです：http://jsfiddle.net/7TjfC/1/

于 2012-05-16T19:37:02.160 に答える