手風琴菜單無法正常工作

我正在使用手風琴菜單。而不是在點擊它後滑動，第二個菜單總是在它被加載時滑動。我想改變它。點擊時，它應該詳細說明子菜單。我沒有得到如何去做。這裏是我的js手風琴菜單無法正常工作

function initMenu() { 
    $('#menu ul').hide(); 
    $('#menu ul:first').show(); 

    $('#menu li a').click(function() { 
     var checkElement = $(this).next(); 

     if ((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
      return true; 
     } 

     if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
      $('#menu ul:visible').slideUp('normal'); 
      checkElement.slideDown('normal'); 
      return false; 
     } 
    }); 
} 

$(document).ready(function() { 
    initMenu(); 
});

這裏的代碼是我的CSS

#menu{ 
    font-family:'Open Sans'; 
    font-size:13px; 
    text-align:center; 

text-transform:uppercase; 
line-height:15px; 
width:250px; 
font-weight:bold; 




} 
ul#menu, ul#menu ul { 

    list-style-type:none; 
    margin: 0; 
    padding: 0; 
    padding-top:5px; 
    padding-bottom:0px; 
    width: 15em; 
    background:url(images/button_menu.png) no-repeat; 
    line-height:15px; 
} 

ul#menu a { 
    display: block; 
    text-decoration: none;  
} 

ul#menu li { 
    margin-top: 1px; 
} 

ul#menu li a { 

    line-height:15px; 
    text-transform:uppercase; 
    color: #fff; 
    padding: 0.5em; 
    line-height:20px; 

} 

ul#menu li a:hover { 

    background:url(images/button_menu_hover.png) no-repeat; 
} 

ul#menu li ul li a { 
    background:#F7F7F7; 
    color: #000; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    line-height: 14px; 

    padding-left: 10px; 
    border-bottom:0px; 
    line-height:20px; 

} 

ul#menu li ul li a:hover { 
    background:url(images/button_menu_hover.png) no-repeat; 
    border-left: 5px #006600 solid; 
    padding-left: 10px; 
    color:#fff; 
}

請幫我該怎麼辦呢

來源

2012-07-10 Prasanna Hegde

我在做類似的事情，這是我從代碼拉我在用着。

instance.$el.find('li.st-open').each(function() { 
var $this = $(this); 
$this.css('height', $this.data('originalHeight') + $this.find('div.st-content').outerHeight(true)); 
});

與CSS之中：

.st-accordion ul li.st-open > a{ 
margin-top:70px; 
} 
.st-accordion ul li{ 
height:auto; 
} 
.st-accordion ul li > a span{ 
visibility:hidden; 
}

和HTML之中：

<div id="st-accordion" class="st-accordion"> 
    <ul> 
     <li><a href="#"><h2>Title 1</h2></a> 
      <div class="st-content"> 
      <p>Content goes here.</p> 
      </div> 
     </li> 
     <li><a href="#"><h2>Title 2</h2></a> 
      <div class="st-content"> 
      <p>Content goes here.</p> 
      </div> 
     </li> 
    </ul> 
</div>

來源

2012-07-10 18:46:02 imakeitpretty

手風琴菜單無法正常工作

回答

相關問題