为什么我的 jQuery 扩展按钮在这里不起作用？答案

【问题标题】：Why aren't my jQuery expansion buttons working here?为什么我的 jQuery 扩展按钮在这里不起作用？
【发布时间】：2012-01-15 13:33:27
【问题描述】：

此处提供演示：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：

（相关 HTML 部分的 CSS）

#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;
}

【问题讨论】：

正如 GregL 所说，问题出在 inline-block 属性上。无论如何，还有另一个属性与 jquery 行为混淆，请参阅这个小提琴：jsfiddle.net/sv3g4

标签： jquery menu expand collapse

【解决方案1】：

问题在于uls 设置为display: inline，而jQuery .toggle() 方法在显示它们时将它们设置为display: inline-block。

所以我建议你调整你的 CSS 让 uls 看起来像块级元素，然后 jQuery 的函数应该可以工作。

【讨论】：