Question

我想点击每个按钮查看每个帖子中的信息，但是当我点击它时它会查看所有信息。

这是我的例子。我有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>

我使用onclick：

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

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

请检查jsfiddle here

Answer 1

您可以使用$(this)定位当前点击的.btn按钮以及 .next() ，以定位点击按钮的下一个直接兄弟.hidden DIV：

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

<强> Updated Fiddle

Answer 2

试试这个

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

Answer 3

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/

Answer 4

我不想更改visibility属性。而是添加/删除可见性类（Fiddle）：

CSS

.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;
}

JavaScript的：

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

HTML：

<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>

单击以查看每个拇指帖的信息

4 个答案: