我怎樣才能讓這個點擊持續發生？

-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

我怎樣才能讓這個點擊持續發生？

回答

相關問題