簡體   English   中英

切換功能,使所有其他div消失

[英]toggle function making all other divs disappear

所以我有很多div(行星)。 我想通過單擊它們使它們消失。 到目前為止,我只有地球和太陽。 在測試運行中,當我單擊太陽時,地球也消失了。 什么是正確的密碼,以便並非所有行星一鍵消失。

HTML:

<div class="planets" id="sun"><div>
<div class-"planets" id="earth"></div>

CSS:

#sun {
    background-image: -webkit-gradient(linear, 100% 45%, 0% 97%, from(#FEA901),     to(#FE4801));
    background-image: -webkit-linear-gradient(top, #FEA901, #FE4801); 
    background-image:    -moz-linear-gradient(top, #FEA901, #FE4801);
    background-image:     -ms-linear-gradient(top, #FEA901, #FE4801);
    background-image:      -o-linear-gradient(top, #FEA901, #FE4801);
    position:relative;
    border:3px solid orange;
    height:150px;
    width:150px;
    position: absolute;
    left: 50%;
    top: 50%; 
    margin-left: -150px;
    margin-top: -150px;
    border-radius:50%;
    -webkit-box-shadow: 0px 0px 30px 5px rgba(255, 255, 190, .75);
    -moz-box-shadow: 0px 0px 30px 5px rgba(255, 255, 190, .75);
    box-shadow: 0px 0px 250px 100px rgba(240, 176, 12, .75);
}

#earth {
    position:absolute;
    top:440px;
    right:700px;
    height:100px;
    width:100px;
    border-radius:50%;
    border:1px solid white;
    background-image: -webkit-gradient(linear, 100% 45%, 0% 97%, from(#068143), t(#FE4801));
    background-image: -webkit-linear-gradient(top, #2215DF, #068143); 
    background-image:    -moz-linear-gradient(top, #FEA901, #068143);
    background-image:     -ms-linear-gradient(top, #FEA901, #068143);
    background-image:      -o-linear-gradient(top, #FEA901, #068143);
    -webkit-box-shadow: 0px 0px 30px 5px rgba(131, 180, 226, .75);
    -moz-box-shadow: 0px 0px 30px 5px rgba(131, 180, 226, .75);
    box-shadow: 0px 0px 50px 10px rgba(131, 180, 226, .75);
}

JS:

$(document).ready(function() {
    $("html").mousemove(function(e){
        $('.follow').css({'top': e.clientY - 100, 'left': e.clientX - 60});
    }); 
    $('.planets').click(function() {
        $('#sun').toggle(1000);
    });
});
$('.planets').click(function() {
    $(this).hide();
}

你也可以

$('.planets').click(function() {
    $(this).toggle();
}

但它毫無意義,因為在它已隱藏之后,您無法單擊它使其重新出現

您的代碼中有幾次錯別字。 您忘記了</div>到太陽,這使它無法正確解析,並且地球也不會出現。 另外,您還有-而不是=。 這是為您修復的代碼:

jsFiddle

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM