div 위치의 jquery 토글 CSS

누군가 나를 제발 도와주세요 !!! 무엇을 내가 마치 유아 :div 위치의 jquery 토글 CSS

html로

에게 설명하십시오, 여기에서 잘못 하하하고있는 중이 야, 그래서 나는 0vh에 #about_me div를 이동 .button 버튼을 만들고 싶어하지만 난 정말 jQuery를 이해하지 못하는

<!DOCTYPE html> 
<html> 
<head> 
<title>Test Page</title> 
<link rel="stylesheet" href="style.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $(".button").click(function(){ 
    $("div.about_me").toggleClass(".about_me_active"); 
    }); 
}); 
</script> 
</head> 
<body> 

<div id="background"><h1>Indiana Porter</h1><h2>Digital Artist</h2> 

<div class="button">About Me</div> 

<div class="about_me"></div> 
</div> 
</body> 
</html>

과 CSS를

body{ 
    margin:0; 
    padding:0; 
    font-family: Arvo; 
    color:white; 
    font-size:1.5vw; 
} 
@font-face { 
    font-family: Arvo; 
    src: url(Arvo-Regular.ttf); 
} 
@font-face { 
    font-family: Arvo-bold; 
    src: url(Arvo-Bold.ttf); 
} 
@font-face { 
    font-family: Arvo-italic; 
    src: url(Arvo-Italic.ttf); 
} 
@font-face { 
    font-family: Arvo-bold-italic; 
    src: url(Arvo-BoldItalic.ttf); 
} 
#background{ 
    width:100vw; 
    height:100vh; 
    max-width:100%; 
    background:url("background.jpg"); 
    background-attachment:fixed; 
    background-position:center; 
    background-origin:center; 
    background-size:cover; 
    position:absolute; 
    overflow:hidden; 
} 
#background h1{ 
    margin:0; 
    padding:0; 
    position:relative; 
    top:15vh; 
    font-family:Arvo-bold; 
    font-size:8vw; 
    text-align:center; 
    text-shadow:0 0 2vw rgba(0,0,0,.5); 
} 
#background h2{ 
    margin:0; 
    padding:0; 
    position:relative; 
    top:15vh; 
    font-family:Arvo-bold; 
    font-size:3vw; 
    text-align:center; 
    text-shadow:0 0 2vw rgba(0,0,0,.5); 
} 
.button{ 
    text-align:center; 
    float:left; 
    font-size:1.5vw; 
    position:absolute; 
    width:8vw; 
    left:45vw; 
    top:80vh; 
    background:rgba(255,255,255,.3); 
    border-radius:.4vw; 
    padding:1vh 1vw; 
    cursor:pointer; 
    box-shadow:0 0 2vw black; 
    transition:.5s; 
} 
.button:hover{ 
    box-shadow:0 0 2vw white; 
} 
.about_me{ 
    width:100vw; 
    height:100vh; 
    max-width:100%; 
    background:url("about_me.jpg"); 
    position:absolute; 
    top:100vh; 
} 
.about_me_active{ 
    width:100vw; 
    height:100vh; 
    max-width:100%; 
    background:url("about_me.jpg"); 
    position:absolute; 
    top:0vh; 
}

출처

2014-11-07 user2072017

'toggleClass (". about_me_active")'remove'.'는 (는)'toggleClass ("about_me_active")이어야합니다. –

전환 클래스는 클래스 이름 앞에 기간을 필요로하지 않는다

$(document).ready(function(){ 
 
    $(".button").click(function(){ 
 
    $(".about_me").toggleClass("about_me_active"); 
 
    }); 
 
});

.about_me{ 
 
    width:100vw; 
 
    height:100vh; 
 
    max-width:100%; 
 
    background-color:red; 
 
    position:absolute; 
 
    top:100vh; 
 
} 
 
.about_me_active{ 
 
    width:100vw; 
 
    height:100vh; 
 
    max-width:100%; 
 
    background-color:black; 
 
    position:absolute; 
 
    top:0vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="background"><h1>Indiana Porter</h1><h2>Digital Artist</h2> 
 

 
<div class="button">About Me</div> 
 

 
<div class="about_me"></div>

출처

2014-11-07 16:23:52

도움에 대한 힙을 주셔서 감사합니다. – user2072017

당신은 필요가 없습니다 "."

여기에 대해 갈 청소기 방법입니다 toggleClass ...

JQuery와에

$(document).ready(function(){ 
    $(".button").click(function(){ 
    $("div.about_me").toggleClass("active"); 
    }); 
});

당신은 활성 상태에 여분의 CSS가 필요하지 않습니다

.about_me{ 
    width:100vw; 
    height:100vh; 
    max-width:100%; 
    background:url("about_me.jpg"); 
    position:absolute; 
    top:100vh; 
} 
.active{ 
    top:0vh; 
}

CSS.

출처

2014-11-07 16:24:32 jleggio

div 위치의 jquery 토글 CSS

답변

관련 문제