在手风琴菜单中使第一个导航项开始关闭

时间:2012-04-17 08:40:53

标签: jquery jquery-ui-accordion

我做了这个教程:

http://michaeljacobdavis.com/tutorials/statesavingaccordion.html 这是演示页面: http://michaeljacobdavis.com/tutorials/statesavingaccordion/statesavingaccordion.html#1

我把它搞定了,但是当用户第一次访问该网站时,我不希望第一个菜单项打开(关于)。我希望关闭所有主菜单项,以便用户在点击其之前无法看到子导航项。我尝试但无法弄清楚如何做到这一点 - 请帮忙。下面是代码 - 当网站首次打开时,“关于”部分始终打开 - 我希望它关闭。

<script type="text/javascript">
jQuery().ready(function(){
$('#navbar').accordion({
    autoHeight: false,
    navigation: true,
    header: '.navbaritem'
});

$(".navbaritem").click(function(event){
      window.location.hash=this.hash;
 });    
});
</script>

    <div id="navbar">
<div id="logo"> <a href="index.html"><img src="images/logo.png" width="234" height="191" border="0" /></a></div>    
<div class="navitemback">
<a class="navbaritem" href="#about" title="First Menu Item" name="about">about</a>
<div>
    <p><a href="#why">why we do it</a></p>
    <p><a href="#press">press/awards</a></p>
    <p><a href="#bio">bio</a></p>
</div>
</div>

<div class="navitemback">
<a class="navbaritem" href="#commercial" title="Second Menu Item" name="commercial">commercial</a>
<div>
    <p><a href="#olivers">olivers</a></p>
    <p><a href="#lemonade">lemonade</a></p>
    <p><a href="#court">court</a></p>
    <p><a href="#macks">macks</a></p>
</div>
</div>

<div class="navitemback">
<a class="navbaritem" href="#residential" title="Third Menu Item" name="residential">residential</a>
    <div>
    <p><a href="#city">city</a></p>
    <p><a href="#states">states</a></p>
    <p><a href="#country">country</a></p>
</div>
</div>

2 个答案:

答案 0 :(得分:2)

这应该有效:

$('#navbar').accordion({
    autoHeight: false,
    navigation: true,
    header: '.navbaritem',
    active: false,
    collapsible: true 
});

答案 1 :(得分:1)

Hiya 演示 :) http://jsfiddle.net/aCeyn/

你也可以不用collapsible这样做:

希望这有帮助!有一个好人,欢呼!

如果您想阅读其他属性或代码,请参阅此处:http://michaeljacobdavis.com/tutorials/statesavingaccordion/jquery-ui.min.js

哦,你也可以随意玩jsfiddle并为你的造型设置样式!

Jquery代码

$(document).ready(function(){
    $('#testMenu').accordion({
        autoHeight: false,
        navigation: true,
        header: '.testMenuItem',
        active: false
    });

    $(".testMenuItem").click(function(event){
          window.location.hash=this.hash;

     });    


});​