如何找到具有相同類名的其他divs並關閉它們

我想知道我應該怎麼做才能用同一個類名顯示多個div中的一個div。如果一個人打開，我點擊另一個，打開的那個應該關閉，而我點擊的那個應該打開。如何找到具有相同類名的其他divs並關閉它們

HTML：

<div class="out"> 
    <div class="content"> <a>click here to learn more..</a> 

    </div> 
</div> 
<div class="out"> 
    <div class="content"> <a>click here to learn more..</a> 

    </div> 
</div> 
<div class="out"> 
    <div class="content"> <a>click here to learn more..</a> 

    </div> 
</div>

CSS：

.out { 
    width:150px; 
    height: 25px; 
    background-color: green; 
    float: left; 
    margin-right:10px; 
} 
.open { 
    border-bottom:5px solid peru; 
    height: 150px; 
} 
.out.open .content { 
    width:100%; 
    height:100%; 
} 
a { 
    display: none; 
} 
.open .content { 
    display: block; 
} 
.open .content > a { 
    color: white; 
    text-decoration: underline; 
    display: block; 
}

JS：

$(document).ready(function() { 
    $('.out').click(function() { 
     $('.out').find('open').removeClass('open'); 
     $(this).addClass('open'); 
    }); 
});

我知道這個問題是在jQuery的，但我有沒有什麼我線索做錯了。

這裏有一個小提琴太：http://jsfiddle.net/4hpgb/22/

來源

2013-12-23 Jeroen

只是改變這一行：

$('.out').find('open').removeClass('open');

這樣：

$('.out').removeClass('open');

它should work。

發生了什麼事是，您將從所有div.out中刪除所有類open，然後將類open添加到當前的類。

$('.out').click(function() { 
    if(!($(this).hasClass('open'))){ 
     $('.out.open').removeClass('open'); 
    } 
    $(this).addClass('open'); 
});

：

來源

2013-12-23 17:44:48 DontVoteMeDown

JSFIDDLE DEMO

$('.out').click(function() { 
    $('.out').removeClass('open'); 
    $(this).toggleClass('open'); 
});

來源

2013-12-23 17:45:49 Krishna

關閉所有第一

$(document).ready(function() { 
    $('.out').click(function() { 
     $('.out').find('open').removeClass('open'); 
     $('.open').each(function(i,v){ 
      $(this).removeClass('open'); 
     }); 
     $(this).addClass('open'); 

    }); 
});

演示here

來源

2013-12-23 17:45:58

是的這幾乎完美的作品，我唯一的問題是，爲什麼有一個'函數（我，五）？我和v代表什麼？而另一個問題，當我再次點擊該div時，它將不會關閉。 – Jeroen

代表索引和值，只是寫他們顯示語法，在這段代碼中不需要它，並且你沒有說關閉行爲再次登錄div –

確實，@ nouphal.M但它不是你的錯。我只是忘了提及它。 – Jeroen

寫開放的div

來源

2013-12-23 17:46:43 Hiral

如果我添加toggleClass到最後一行，它完美的作品。就像它想要的一樣！ – Jeroen

將關閉打開的div。 – Hiral

yup :)查看：[link]（http://www.digitusweb.nl/nieuw）在頁面底部，你會看到「relatie met klanten」，「communicatie」和「werkwijze」。這就是它的目的。 – Jeroen

如何找到具有相同類名的其他divs並關閉它們

回答

相關問題