如何找到具有相同类名的其他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并关闭它们

回答

相关问题