Jquery 在列表中切换div并隐藏其他div

我需要做的是在单击.info时切换.information，同时隐藏所有其他.information div。我现在可以这样做我的问题是当我点击关闭一个打开的信息分区时，它不会关闭。如何修改以下代码以实现此目的？我有一个开关（）所以我认为它会工作？只是掌握jQuery

<ol id="resonsToCome">
    <li>
        <p>A packed and extensive activites programe</p>
        <div class="info">
            <img src="images/icons/information.png" width="24" height="24" />
        </div>
        <div class="information">
            <p>The 40+ activities range from 1 to 2 hours. As everything is on site there is no time wasted travelling which ensures up to 5/6 activities per day.</p>
        </div>
    </li>
    <li>
        <p>Instructors stay with their group throughout your stay</p>
        <div class="info">
            <img src="images/icons/information.png" width="24" height="24" />
        </div>
        <div class="information">
            <p>Building a trust and friendship with our customers makes your stay memorable in so many ways.</p>
        </div>
    </li>
    <li>
        <p>Friendly and experienced instructors</p>
        <div class="info">
            <img src="images/icons/information.png" width="24" height="24" />
        </div>
        <div class="information">
            <p>Our instructors take part in a rigorous selection and continuous training programme.</p>
        </div>
    </li>
    <li>
        <p>A great environment and perfect location!</p>
        <div class="info">
            <img src="images/icons/information.png" width="24" height="24" />
        </div>
        <div class="information">
            <p>25 acres of beautiful Somerset fields, woodlands and river only 2 hours from London and 1 hour south of Bristol and Bath.</p>
        </div>
    </li>
</ol>

---

请尝试以下代码：

$("div.info").on("click", function() {
    var el = $(this).siblings(".information");
    $("#resonsToCome .information").not(el.show()).hide();
});

---

由于您正在隐藏所有内容，切换只会重新显示您要隐藏的项目。试试这个

$(document).ready(function(){
    $('div.info').on('click', function() {
        var closestIsVisible = $(this).closest('ol#resonsToCome li').find('.information').is(":visible");
        $('.information').hide();
        if(!closestIsVisible)
        {
            $(this).closest('ol#resonsToCome li').find('.information').toggle();
        }
    });
});

见此：

$('div.info').click(function(e) {
   $(this).parent().find('.information').toggle();
});

这会奏效的。在这里演奏小提琴-

---

单击1,2,3,4，因为它们是div中带有类“info”的文本，因为图像不可见。希望这能有所帮助。

理性是逻辑的亚原子基本粒子。它的二元对立物是共和国。目前还处于理论阶段，但研究人员认为，他们已经接近于验证这两个方面，也接近于验证他们的政治大统一理论。那么css呢？如果有，请在这里列出。唯一需要注意的css是有一个显示：div上没有。information@Rob-我在这里发布了一个解决方案。谢谢，但这并不能解决问题。这会切换div，但我仍然无法切换相同的div（因此所有div都被隐藏）。

$('div.info').click(function(e) {
   $(this).parent().find('.information').toggle();
});