Javascript 单击以查看每个拇指柱上的信息

我想点击每个按钮来查看每篇文章中的信息，但当我点击它时，它会查看所有信息

这是我的例子。我的HTML格式如下：

<div class='list post'>
    <div class='post'>
        <div class='btn'>btn</div>
        <div class='hidden'>Hidden Info 1</div>
    </div>
    <div class='post'>
        <div class='btn'>btn</div>
        <div class='hidden'>Hidden Info 2</div>
    </div>
    <div class='post'>
        <div class='btn'>btn</div>
        <div class='hidden'>Hidden Info 3</div>
    </div>
</div>

但它不起作用。我想使用切换或类似的东西，但我不知道怎么做

请选中JSFIDLE

您可以使用$this来瞄准当前点击的.btn按钮，同时瞄准点击按钮的下一个直接同级，即.hidden div:

试试这个

$('.btn').click(function(){
    $(this).next('.hidden').css({"visibility":"visible"});
});

---

我不希望更改可见性属性。而是添加/删除可见性类：

CSS

JavaScript:

$('.btn').click(function(){
    if($(this).next('.info').hasClass('visible') === false)
    {
        $('.visible').removeClass('visible');
        $(this).next('.info').addClass('visible');
    }
});

HTML:

---

但当我按下button2false时，它不会关闭。如果我将按钮移动到类中的任何位置，会发生什么。post它不正常吗？@user2728514您可以使用。sides:$this.sides'.hidden'.css{visibility:visible}；当我再次点击时，它是否关闭？谢谢你的帮助，你可以这样做。

$('.btn').click(function(){
    $(this).next('.hidden').css({"visibility":"visible"});
});

Try this:

$('.btn').click(function(){
    $('.hidden').css({"visibility":"hidden"});
    $(this).next().css({"visibility":"visible"});

});

You can also check it here: http://jsfiddle.net/X2kW4/7/

.post {
    height: 100px; 
    width: 100px;
    background: #cd4900; 
    margin-bottom: 6px;
    color: #fff; 
    text-align: center; 
}

.post .btn {
    margin-top: 5px !important; 
    width: 80%; 
    padding: 5px; 
    background: green; 
    margin: 0 auto; 
    text-align: center; 
    border-radius: 4px; 
    cursor: pointer
}

.visible {
    visibility: visible !important;
}

.info {
   visibility: hidden;
}

$('.btn').click(function(){
    if($(this).next('.info').hasClass('visible') === false)
    {
        $('.visible').removeClass('visible');
        $(this).next('.info').addClass('visible');
    }
});

<div class='list post'>
    <div class='post'>
        <div class='btn'>btn</div>
        <div class='info'>Hidden Info 1</div>
    </div>
    <div class='post'>
        <div class='btn'>btn</div>
        <div class='info'>Hidden Info 2</div>
    </div>
    <div class='post'>
        <div class='btn'>btn</div>
        <div class='info'>Hidden Info 3</div>
    </div>
</div>