Question

我试图在点击时创建一个显示或隐藏内容的功能。问题是当我点击按钮时显示所有内容。我希望它独立工作

HTML

<div class="case_study">
    <button class="open_case" type="Button">Show Case Study</button>

    <div class="case show_case">
    <p>case study here</p>
    <button class="close_study" type="button"> Close Study</button>
    </div>
</div>

<div class="case_study">
    <button class="open_case" type="Button">Show Case Study</button>

    <div class="case show_case">
        <p>case study here</p>
        <button class="close_study" type="button"> Close Study</button>
    </div>
</div>

JAVASCRIPT

<script>
$(document).ready(function(){
        $('.case_study .open_case').click(function(){
        $('.case').removeClass('show_case')
    })

    $('.case_study .close_study').click(function(){
        $('.case').addClass('show_case')  
    })
})
</script>

CSS

.case{
   margin:20px;
   height:500px;
   width:500px; 
   background-color:teal; 
  -moz-box-sizing:border-box; 
  -moz-transition:all 0.5s ease-in; 
  opacity: 1
}

.show_case{
    height:0px;
    width:0px;
   -moz-transition: all 0.5s ease-in;
    opacity: 0; 
}

Answer 1

使用你的html，你可以这样做

$(document).ready(function(){
    $('.case_study .open_case').click(function(){
        $(this).next().removeClass('show_case');
    });

    $('.case_study .close_study').click(function(){
        $(this).closest('div').addClass('show_case');
    });
});

Answer 2

你可以使用show（）和hide（）

<div class="case_study">
    <button class="open_case" type="Button" onClick="fun1()">Show Case Study</button>

    <div class="case show_case" id="d1">
    <p>case study here</p>
    <button class="close_study" type="button"> Close Study</button>
    </div>
</div>

<div class="case_study">
    <button class="open_case" type="Button" onClick="fun2()">Show Case Study</button>

    <div class="case show_case" id="d2">
        <p>case study here</p>
        <button class="close_study" type="button"> Close Study</button>
    </div>
</div>

现在在javascript中

fun1()
{
    if (!$('#d1').is(':visible'))
    {
        $('#d1').show();
    }
    else
    {
        $('#d1').hide();
    }
}

fun2()
{
    if (!$('#d2').is(':visible'))
    {
        $('#d2').show();
    }
    else
    {
        $('#d2').hide();
    }
}

还包括jquery文件。

独立显示和隐藏内容

2 个答案: