0

我有一个在 chrome、IE8、firefox 中运行良好的手风琴菜单，但是事实证明 IE7 有点困难。

你可以在这里看到所有的代码：http: //jsfiddle.net/Y5pmV/

非常感谢您的帮助，因为我的截止日期非常紧迫！

提前谢谢了。

代码也在这里....

CSS

#navbar {
list-style: none;
padding: 0 0 0 0;
width: 233px;
}
#navbar li {
text-align:center;
font-weight: bold;
margin-bottom: 2px;
cursor: pointer;
list-style: circle;
height:29px;
line-height:normal;
display: table;
width: 100%;
}
#navbar ul {
list-style: none;
padding: 0 0 0 0;
display: none;
}
#navbar ul li {
font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
line-height:normal;
}
#navbar a {
padding-top:5px;
text-decoration: none;
font-size: 19px;
}
#navbar a:hover {
}
#navbar li:first-child {
margin:2px 0 2px 0;
background:url(images/menuBG.png) 0px -90px;
}

#navbar li#menu-item-12 a, #navbar li#menu-item-13 a, #navbar li#menu-item-14 a, #navbar    li#menu-item-29 a {
color:#76a443
}

Javascript...

$("#navbar > li").click(function () {
var child = '#' + $(this).attr('id') + ' > ul';
$(child).slideToggle();
});
$('#navbar > ul:eq(0)').show();

HTML...

<ul id="navbar" class="menu">
<li id="menu-item-29" class="menu-item menu-item-type-custom
 menu-item-object-custom firstmenuitem"><a href="http://#" class="item"> Pests </a>

    <ul class="sub-menu">
        <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">Product 1</a>

        </li>
        <li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">Product 2</a>

        </li>
        <li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">product 3</a>

        </li>
        <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">Product 4</a>

        </li>
        <li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="http://product-5" class="item">product 5</a>

        </li>
    </ul>
</li>
<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom">
<a> Products </a>

    <ul class="sub-menu">
        <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">Product 1</a>

        </li>
        <li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">product 2</a>

        </li>
        <li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">product 3</a>

        </li>
        <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">Product 4</a>

        </li>
        <li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="http://product 5" class="item">product 5</a>

        </li>
    </ul>
</li>
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item"> decs 1 </a>

</li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item"> desc2 </a>

</li>
<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item"> desc 3 </a>

</li>
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">desc4 </a>

</li>
<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item"> desc 5 </a>

</li>
<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item"> desk 6 </a>

</li>
<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="http://#" class="item"> desk 7 </a>

</li>
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom
lastmenuitem"><a href="#" class="item"> Links </a>

</li>
</ul>
<!-- Navbar ends here -->
</div>
<!-- Menu ends here -->
4

2 回答 2

0

尝试这个：

$("#navbar > li").click(function () {
$("#navbar > li").css({height:'29px'});
$(this).css({height:'auto'});
var child = '#' + $(this).attr('id') + ' > ul';
$(child).slideToggle();
});
$('#navbar > ul:eq(0)').show();
于 2013-02-02T11:28:59.990 回答
0

29px你在这个类中有一个固定的高度：http #navbar li: //jsfiddle.net/Y5pmV/2/

你的问题在这里：

#navbar li {
  text-align:center;
  font-weight: bold;
  margin-bottom: 2px;
  cursor: pointer;
  list-style: circle;
  height:auto;   //<-------------you have fixed the height here make it auto;
  line-height:normal;
  display: table;
  width: 100%;
}

更新：

您在小提琴中有一个这样的链接，试图导航。

<a href="http://#"></a>

也改变这个：

<a href="#"></a>
于 2013-02-02T11:02:52.353 回答