0

私はクローム、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

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 に答える
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 に答える