在列表中切換div並隱藏其他

當我點擊.info時，我需要做的是切換.information，同時這隱藏了所有其他的.information div。我目前可以做到這一點我的問題是，當我點擊關閉一個打開.information div它不會關閉。如何修改這個代碼來做到這一點？我有一個切換（），所以認爲它會工作？只是抓jQuery！在列表中切換div並隱藏其他

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

來源

2012-09-25 Rob

A共振是邏輯的次原子基本粒子。它的對立面是共和黨。目前的理論，但研究人員認爲他們接近於驗證他們的大統一政治理論。 – Blazemonger

css呢？如果有的話，請在這裏列出。 –

只有css要注意的是，有一個顯示：沒有div.information – Rob

是，你都躲在一切撥動只是要重新表明你想要的項目被隱藏。試試這個

$(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-25 13:39:09 Shaggy

謝謝，作品完美。 – Rob

試試下面的代碼：

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

來源

2012-09-25 13:30:22 VisioN

謝謝，但這並不能解決問題。切換div，但我仍然不能切換相同的div（這樣所有的div都隱藏起來了。） – Rob

看到這個：

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

這將工作。在這裏工作的小提琴 - http://jsfiddle.net/RCefe/1/

點擊1,2,3,4，因爲它們是class「info」中的文本，因爲圖像不可見。希望這可以幫助。

來源

2012-09-25 13:46:34

在列表中切換div並隱藏其他

回答

相關問題