当前位置：首页 → 问答吧 → 如何改变下拉菜单栏超链的背景图？

如何改变下拉菜单栏超链的背景图？

时间：2009-09-13

来源：互联网

其几天在网上看到一个关于Jquery实战视频其中有一个做下拉菜单的，感觉挺好的，就跟着做了。
效果：附件一
展开：附件二
现在的问题是我想在点击展开的时候，我点击菜单超链接前面的三角形改为倒三角，其余菜单栏的图标不变，
我在代码里面写Click事件触发改变 CSS的背景图片，但是其他菜单项因为是用的同一个css 原来的小三角型都会变为倒三角。
如图：附件三
我该如何写才能只让我点击菜单前面的三角形改变为倒三角，其余菜单不展开不变呢？
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" />
<link type="text/css" rel="stylesheet" href="css/menu.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/menu.js" ></script>
<title>Jquery菜单栏制作</title>
</head>
<body>

<ul>
<li class="main"><a href="#">菜单栏01</a>
<ul>
<li><a href="#">子菜单栏11
</a></li>
<li><a href="#">子菜单栏12
</a></li>
<li><a href="#">子菜单栏13
</a></li>

</ul>
</li>
<li class="main"><a href="#">菜单栏02</a>
<ul>
<li><a href="#">子菜单栏21
</a></li>
<li><a href="#">子菜单栏22
</a></li>
<li><a href="#">子菜单栏23
</a></li>
</ul>
</li>
<li class="main"><a href="#">菜单栏03</a>
<ul>
<li><a href="#">子菜单栏31
</a></li>
<li><a href="#">子菜单栏33</a></li>
<li><a href="#">子菜单栏33
</a></li>

</ul>
</li>
</ul>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
ul,li{
/*清除ul.li上的小圆点*/
list-style:none;
}
ul{
  /*清除子菜单的缩进值*/
  padding:0;
  margin:0;
}
.main{

  background-image:url(../images/blackmenu-top.JPG);
  /*background-repeat 设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像( background-image )
  repeat-x :　背景图像仅在横向上平铺
  */
  background-repeat:repeat-x;
  width:120px;/*设置主菜单的宽度*/
  }
  li{
   /*设置子菜单项的背景色冲主菜单的背景图像*/
   background-color:#CCC;}
   a{
    /*取消超链接的下划线*/
    text-decoration:none;
    /*设置超链接距离左边距离*/
    padding-left:20px;
    display:block;
    display:inline-block;
    width:100px;
    padding-top:3px;
    padding-bottom:3px;
    }
  .main a{

   color:#FFF;
   background-image:url(../images/toggle.gif);
   background-repeat:no-repeat;
   background-position:7px center;

   }

   .main li a{

    color:#000;
    background-image:none;
    }
    .main ul{

     display:none;
     }
     .main1{
      color:#FFF;
      background-image:url(../images/hide.gif);
     background-repeat:no-repeat;
     background-position:7px center;

      }
      .main1{
      color:#FFF;
      background-image:url(../images/toggle.gif);
     background-repeat:no-repeat;
     background-position:7px center;

      }
JS:
//menu的js代码
$(document).ready(function(){
//页面dom加载完成时，执行的代码
$(".main > a").click(function(){
  //找到主菜单对应的子菜单


            var ulNode=$(this).next("ul");
         if(ulNode.css("display")=="none"){

      ulNode.show("normal");

         }else{
          ulNode.hide("normal");
          };


        }) ;



         })
谢谢大家！

图片:

没有解决的？

作者: roar 发布时间: 2009-09-13

如何改变下拉菜单栏超链的背景图？

热门阅读

热门下载