Question

我一直在尝试学习Javascript / jQuery，并尝试通过在this页面上复制粘贴代码来构建手风琴菜单。但是，当我尝试制作多个div时，只有第一个可以工作。如果我将ID切换为Classes，则单击时两个div都会展开。这是我从W3Schools中获取的剧本;

$(document).ready(function(){
    $(".flip").click(function(){
        $(".panel").slideToggle("slow");
    });
});

然后在HTML中我有

        <div class="flip">Category A</div>
        <div class="panel">
            One <br/>
            Two <br/>
            Three <br/>
            Four <br/>
        </div>
        <div class="flip">Category B</div>
        <div class="panel">
            One <br/>
            Two <br/>
            Three <br/>
            Four <br/>
        </div>

和CSS -

#flip, #panel{
    width: 350px;
    text-align: center;
    font-family: arial, sans-serif;
    color: white;
    font-size: 2em;
    margin: 0 auto;
}

#flip{
    height: 40px;
    padding: 10px 0;
    background-color: #cc44ff;
}

#panel{
    display: none;
    background-color: orange;
}

如果我复制函数和类并给它们新名称，我已经设法让它工作，但它看起来很乱并且没必要。有更清洁的方法吗？

我也将它发布到JSFiddle - http://jsfiddle.net/Nikf/k1wstb5n/

Answer 1

问题在于this地址所有匹配元素，而不仅仅是感兴趣的元素。

从点击的元素.panel开始，您可以“遍历DOM”以选择 next $(".flip").click(function() { $(this).next(".panel").slideToggle("slow"); });，忽略所有其他内容：

var extended = (ExtendedMyClass)item;
@Html.DisplayFor(m => extended)

DEMO（使用经过适当调整的CSS的问题中的HTML）

Answer 2

Update Fiddle 将id更改为class：

<body>
        <div class="sidebar">
            <div class="cat">
                <div class="flip">Category A</div>
                <div class="panel">
                    One <br/>
                    Two <br/>
                    Three <br/>
                    Four <br/>
                </div>
            </div>
            <div class="cat">
                <div class="flip">Category B</div>
                <div class="panel">
                    One <br/>
                    Two <br/>
                    Three <br/>
                    Four <br/>
                </div>
            </div>
        </div>
</body>

CSS：

*{
    padding: 0;
    margin: 0;
}

html{
    height: 100%;
}

.sidebar{
    width: 320px;
    height: 100%;
    background-color: ;
}   

.flip, .panel{
    width: 350px;
    text-align: center;
    font-family: arial, sans-serif;
    color: white;
    font-size: 2em;
    margin: 0 auto;
}

.flip{
    height: 40px;
    padding: 10px 0;
    background-color: #cc44ff;
}

.panel{
    display: none;
    background-color: orange;
}

通过对项目使用.cat容器，只需使用此jquery：

$(document).ready(function(){
    $(".flip").click(function(){
        $(this).siblings('.panel').slideToggle("slow");
    });
});

创建jQuery手风琴菜单的更好方法是什么？

2 个答案: