jQuery 一次仅关闭和打开一个元素

Question

在讨论我的问题之前，我将在找到部分解决方案的地方发布引用:

• Here is the answer to my similar problem

现在首先我将在 jsFiddle 上发布我的整个示例，删除不必要的内容:

• My example

我还将在这里发布代码:

• HTML:

<小时/>

<ol class="decimalListFirstOl">
<li class="decimalListLi">
    Test1
    <ol class="decimalListSecondOl">
         <li class="columns decimalListLi">
            Test1<span class="show">+</span>
            <div class="hide">
                <ul class="defaultFont">
                    <li>Test1</li>
                    <li>Test2</li>
                    <li>...</li>
                </ul>
            </div>
        </li>
        <li class="columns decimalListLi">
            Test2
            <span class="show">+</span>
            <div class="hide">
                <ul class="defaultFont">
                    <li>Test1</li>
                    <li>Test2</li>
                    <li>...</li>
                </ul>
            </div>
        </li>
        <li class="columns decimalListLi">
            Test3
            <span class="show">+</span>
            <div class="hide">
                <ul class="defaultFont">
                    <li>Test1</li>
                    <li>Test2</li>
                    <li>...</li>
                </ul>
            </div>
        </li>
    </ol>
</li>

• CSS:

<小时/>

.hide {
display: none;
}
.columns {
    float: left;
    width: 33%;
}
.decimalListLi {
    color: #627490;
    display: block;
}
.decimalListLi:before {
    content: counters(item, ".") " ";
    counter-increment: item;
}
.decimalListFirstOl {
    counter-reset: item;
    font-size: 17px;
    font-weight: bold;
    padding-left: 0;
}
.decimalListSecondOl {
    counter-reset: item;
    font-size: 15px;
    font-weight: normal;
    padding-left: 25px;
}
.defaultFont {
    color: #525252;
    font-family: Tahoma, Arial, Helvetica, Sans-Serif;
    font-size: 12px;
}

• JAVASCRIPT/JQUERY:

<小时/>

$(document).ready(function() {
    $('.show').click(function() {
        var index = $(this).index();
        $('.hide').eq(index).slideToggle("slow").siblings('.hide').hide();
    });
});

我使用的是 jQuery 1.6.2。我希望单击符号(+)，关闭当前打开的列，然后打开单击的列(向下滑动)。我已经实现了打开和关闭，但由于某种原因，无论单击哪个 +，它总是打开和关闭第一列。现在我已经遵循了第一个链接上的答案，但问题是，我嵌套了 ol 和 li，这就是为什么可能是这行代码的原因:

var index = $(this).index();

由于某种原因总是返回0!这意味着它将始终打开和关闭第一列。

Answer 1

您的切换按钮的索引为“0”，因为它们的 .index() 引用了“元素在父级中的索引”在“他的”li 父级中只有 1 '.show'。

所以只需使用

查找 parent索引()即可

 var index = $(this).parent().index(); 

这是一个切换已打开菜单的演示:

DEMO

$(document).ready(function() {
    $('.show').click(function() {
        var index = $(this).parent().index();
        $('.hide').hide();
        $('.hide').eq(index).slideToggle("slow");      
    });
});

您也可以使用此解决方案(使用 .next('.hide') 它将查找下一个元素 .hide):

$(document).ready(function() {
    $('.show').click(function() {
        $('.hide').hide();
        $(this).next('.hide').slideToggle();
    });
});