javascript - Javascript - 当我们点击 div 时添加样式

Question

$(document).ready(function() {
    $('.nb-team .nb-team-grid').click(function() {
        $(".nb-team-info")
        .css('opacit:1')
    });
});

嘿伙计们，当我们点击 div 时，我正在尝试改变样式。它应该只发生在移动分辨率中。所以我尝试了但它不起作用，我在上面附上了我的代码。请通过以获取更多说明。谢谢 ：）

标签： javascriptjqueryhtmlcss

Answer 1

If you want to add this style only to the mobile or small screen size you can try this.

<script>

$(document).ready(function() {
    $(".nb-team-grid").click(function() {
$(this).next(".nb-team-info").toggleClass("my-class");
         
    });
});

</script>

.my-class{  opacity:0;}

.parent-div{background:#eee; width:50%; float:left; height:auto;}

@media (max-width:420px){

    .my-class{
        
       opacity:0;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent-div">
<div class="nb-team-grid" style="height:100px; width:100px; background:red;"></div>

<div class="nb-team-info"  style="height:100px; width:100px; background:black;"></div>

</div>


<div class="parent-div">
<div class="nb-team-grid" style="height:100px; width:100px; background:red;"></div>

<div class="nb-team-info"  style="height:100px; width:100px; background:black;></div>

</div>