왜 내 jQuery 확장 버튼이 작동하지 않습니까?

Question

데모를 여기서 볼 수 있습니다 : http://web.cs.dal.ca/~selig/finale/

그들은 분명히 매우 이상하게 무너지고 있습니다. 아무도 그들이 올바르게 사용하지 않도록 설정하는 방법을 알아낼 수 있습니까?

jQuery를 :

$(document).ready(function() { 
    $('#toggle1').click(function() { 
     $('#collapse1').toggle('fast'); 
     $('#toggle1').attr('src', 'media/expand.png'); 
    }); 
    $('#toggle2').click(function() { 
     $('#collapse2').toggle('fast'); 
     $('#toggle2').attr('src', 'media/expand.png');  
    }); 
}); 

관련 HTML :

이 HTML 페이지의 div 영역뿐만 아니라 확인 된 메뉴 부분입니다.

<div id="menu"> 
       <ul> 
        <li class="title">Sites <img src="media/collapse.png" alt="Toggle expansion button" id="toggle1" /></li> 
       </ul> 
       <ul id="collapse1"> 
        <li><a href="">Assignment 1</a></li> 
        <li><a href="">Assignment 2</a></li> 
        <li><a href="">Assignment 3</a></li> 
        <li><a href="">Assignment 4</a></li> 
        <li><a href="">Assignment 5</a></li> 
        <li><a href="">Assignment 6</a></li> 
        <li><a href="">Assignment 7</a></li> 
       </ul> 

       <ul> 
        <li class="title">Articles <img src="media/collapse.png" alt="Toggle expansion button" id="toggle2" /></li> 
       </ul> 
       <ul id="collapse2"> 
        <li><a href="http://en.wikipedia.org/wiki/Christmas">Christmas</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Gift">Gifts</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Happiness">Happiness</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Santa_Claus">Santa Claus</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Rudolph_the_Red-Nosed_Reindeer">Rudolph</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Reindeer">Reindeer</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/December">December</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Snow">Snow</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Elf">Elves</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Christmas_carol">Caroling</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Christmas_card">Cards</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Eggnog">Eggnog</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Cookie">Cookies</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Chimney">Chimney</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Christmas_tree">Trees</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Christmas_lights_(decoration)">Lights</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Santa's_workshop">Workshop</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Gingerbread">Gingerbread</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Cheering">Cheer</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Tinsel"><strong>Tinsel</strong></a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Christmas_stocking">Stockings</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Gift_wrapping">Wrapping</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/The_Nutcracker">Nutcracker</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/World_of_Coca-Cola">Polar Bears</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Tatamagouche,_Nova_Scotia">T'was the night before Christmas</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Talladega_Nights:_The_Ballad_of_Ricky_Bobby">Baby Jesus</a></li> 
       </ul> 
      </div> 

관련 CSS : 문제는 ul의이 display: inline로 설정되어 있는지 사실, JQuery와 .toggle()와 함께 할 것입니다

#menu { 
    float: left; 
    width: 107px; 
    background: tan; 
    color: black; 
    margin: 0 5px 0 0; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border: 1px solid grey; 
    border-radius: 3px; 
} 

#menu ul { 
    display: inline; 
    list-style: none; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 0.9em; 
} 

#menu li { 
    border-bottom: 1px solid black; 
    padding: 5px 5px 5px 5px; 
} 

#menu a { 
    color: black; 
} 

li.first { 
    border-left: 1px solid black; 
} 

li.title { 
    background: #593f26; 
    color: white; 
    text-align: center; 
    font-weight: bold; 
    text-transform: uppercase; 
} 

Answer 1

이

(관련 HTML 부분에 대한 CSS) 메서드는 그것들을 보여줄 때 display: inline-block으로 설정합니다.

그래서 CSS를 조정하여 ul을 블록 레벨 요소처럼 보이게 한 다음 jQuery의 기능이 작동해야합니다.