Question

我有一个手风琴菜单，在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 -->

Answer 1

此课程29px中#navbar li的固定高度为#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%; }：http://jsfiddle.net/Y5pmV/2/

您的问题在这里：

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

更新

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

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

也改变了这一点：

{{1}}

Answer 2

试试这个：

$("#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();

IE7手风琴菜单无效

2 个答案:

更新