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()被引用'元素 父'中的元素索引而且只有 1 < / strong>'.show'在'他的'li父母内部。

所以只需使用

查找父索引（）

 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();
    });
});

Answer 2

siblings（）只会获得具有相同父级的元素。

var target = $(this).siblings(".hide"); //Get the div that corresponds to the plus we just clicked.
$(".hide").not(target).hide(); //Hide hidable elements that are not the target
target.slideToggle();          //Toggle the targetted div

Answer 3

您应切换到each()方法来设置活动。

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