我怎样才能让这个点击持续发生？

-1

我想要的是'.child'图像始终在屏幕上，但显示和隐藏.parent div。我已经能够让它显示一次并隐藏一次，但我似乎无法弄清楚如何让它重现。我怎样才能让这个点击持续发生？

var main = function() { 
 

 
    $('#logo').on('click',function() { 
 
    $(this).parent('.parent').css('visibility', 'visible'); 
 
    $('#logo').on('click',function() { 
 
     $(this).parent('.parent').css('visibility', 'hidden'); 
 
    }); 
 
    }); 
 

 

 
}; 
 

 
$(document).ready(main);

.jumbotron { 
 
    height: 250px; 
 
    width: 100%; 
 
    display: flex; 
 
    border: 1px solid green; 
 
} 
 
.parent { 
 
    margin: auto; 
 
    display: flex; 
 
    height: 200px; 
 
    width: 80%; 
 
    border: 1px solid black; 
 
    visibility: hidden; 
 
} 
 
.child { 
 
    width: auto; 
 
    height: 100px; 
 
    margin: auto; 
 
    visibility: visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='jumbotron'> 
 
    <div class='parent'> 
 
    <img id='logo' class='child' src="http://content.sportslogos.net/logos/6/216/full/813.gif" /> 
 
    </div> 
 
</div>

来源

2016-03-01 Brendan E

好吧，如果你躲'.parent'然后它会隐藏它的孩子为好，如它会隐藏'.child'。如果你想隐藏'.parent'并显示'.child'，你必须将'.child'移出'.parent'。 –

最重要的是，每次点击徽标时，您的点击事件都会被绑定，而不是一次。将第二个点击处理程序移出第一个点击处理程序。 – Daedalus

使用切换触发您想要的隐藏和显示效果。点击它将根据其以前的状态切换到可见或隐藏状态。如果没有必要，也不要使用委托事件。使用点击而不是在 –

曾试图此较早，但在我的代码一定是搞错了。

增加class .active并且能够使用.toggleClass（'active'）;

var main = function() { 
 

 
    $('#logo').click(function() { 
 
    $(this).parent('.parent').toggleClass('active'); 
 

 
    }); 
 

 

 
}; 
 

 
$(document).ready(main);

.jumbotron { 
 
    height: 250px; 
 
    width: 100%; 
 
    display: flex; 
 
    border: 1px solid green; 
 
} 
 
.parent { 
 
    margin: auto; 
 
    display: flex; 
 
    height: 200px; 
 
    width: 80%; 
 
    border: 1px solid black; 
 
    background: rgba(0, 0, 0, .2); 
 
} 
 
.active { 
 
    visibility: hidden; 
 
} 
 
.child { 
 
    width: auto; 
 
    height: 100px; 
 
    margin: auto; 
 
    visibility: visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='jumbotron'> 
 
    <div class='active parent'> 
 
    <img id='logo' class='child' src="http://content.sportslogos.net/logos/6/216/full/813.gif" /> 
 
    </div> 
 
</div>

来源

2016-03-01 23:01:34

使用，用来切换DIV的可视性一个单一的处理程序。

var main = function() { 
 

 
    $('#logo').on('click',function() { 
 
    $(this).parent(".parent").css("visibility", function(i, oldvis) { 
 
     return oldvis == "visible" ? "hidden" : "visible"; 
 
    }); 
 
    }); 
 

 
}; 
 

 
$(document).ready(main);

.jumbotron { 
 
    height: 250px; 
 
    width: 100%; 
 
    display: flex; 
 
    border: 1px solid green; 
 
} 
 
.parent { 
 
    margin: auto; 
 
    display: flex; 
 
    height: 200px; 
 
    width: 80%; 
 
    border: 1px solid black; 
 
    visibility: hidden; 
 
} 
 
.child { 
 
    width: auto; 
 
    height: 100px; 
 
    margin: auto; 
 
    visibility: visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='jumbotron'> 
 
    <div class='parent'> 
 
    <img id='logo' class='child' src="http://content.sportslogos.net/logos/6/216/full/813.gif" /> 
 
    </div> 
 
</div>

来源

2016-03-01 22:58:17 Barmar

一种简单的方式做切换：

var main = function() { 

    var visible = false; 

    $('#logo').on('click',function() { 

    visible = !visible; 

    var val = (visible) ? 'visible' : 'hidden'; 
    $(this).parent('.parent').css('visibility', val); 


    }); 

};

来源

2016-03-01 23:00:21

我怎样才能让这个点击持续发生？

回答

相关问题