0

私がこれを行う必要があるのは、.info がクリックされたときに .information を切り替えることです。同時に、これにより、他のすべての .information div が非表示になります。私は現在これを行うことができます。私の問題は、開いている .information div をクリックして閉じたときに閉じないことです。これを行うには、次のコードをどのように修正できますか? 私は toggle() を持っているので、うまくいくと思いましたか? 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>

そして、jQuery

$('div.info').on('click', function() {
        $('.information').hide();
        $(this).closest('ol#resonsToCome li').find('.information').toggle();
    });
4

3 に答える 3

1

すべてを非表示にしているので、トグルは非表示にしたいアイテムを再表示するだけです. これを試して

$(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();
        }
    });
});
于 2012-09-25T13:39:09.310 に答える
0

これを参照してください：

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

これは機能します。ここで作業フィドル - http://jsfiddle.net/RCefe/1/

画像が表示されないため、クラス「情報」のdiv内のテキストであるため、1,2,3,4をクリックします。お役に立てれば。

于 2012-09-25T13:46:34.727 に答える
0

次のコードを試してください。

$("div.info").on("click", function() {
    var el = $(this).siblings(".information");
    $("#resonsToCome .information").not(el.show()).hide();
});
于 2012-09-25T13:30:22.487 に答える