jQuery 道場コース 中級編

1. 新規登録モーダルをつくろう

index.html
<!– モーダル部分 –>
<div class=”signup-modal-wrapper” id=”signup-modal”>
<div class=”modal”>
<div id=”close-modal”>
<i class=”fa fa-2x fa-times”></i>
</div>
<div id=”signup-form”>
<h2>Emailで新規登録</h2>
<form action=”#”>
<input class=”form-control” type=”text” placeholder=”メールアドレス”>
<input class=”form-control” type=”password” placeholder=”パスワード”>
<div id=”submit-btn”>新規登録</div>
</form>
</div>
</div>
</div>
<!– モーダルここまで –>

stylesheet.css
/*モーダル*/
.signup-modal-wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 100;
display: none;
}

script.js
$(function() {

// 新規登録モーダル

$(‘.signup-show’).click(function() {
$(‘#signup-modal’).fadeIn();
});

$(‘#close-modal’).click(function() {
$(‘#signup-modal’).fadeOut();
});

});

2. レッスン一覧をつくろう
hover機能
addClass・removeClass

hoverイベントを使って、下図のようにレッスンのアイコンにマウスが乗った時にだけ、レッスンの紹介文が表示されるようにしましょう。レッスンの紹介文はデフォルトでは表示しないようにします。

stylesheet.css
.text-contents {
margin: 3% auto;
width: 80%;
font-size: 12px;
color: #b3aeb5;
display: none;
}

.text-active {
display: block;
}

script.js
$(‘.lesson’).hover(
function() {
$(this).find(‘.text-contents’).addClass(‘text-active’);
},
function() {
$(this).find(‘.text-contents’).removeClass(‘text-active’);
}
);
});

3. アコーディオンをつくろう
if文 slideUp slideDown
hasClass

stylesheet.css
.faq-list-item {
margin:10px;
border-bottom:1px solid #ccc;
position:relative;
cursor:pointer;
text-align: left;
}

script.js
// アコーディオン

$(‘.faq-list-item’).click(function() {
var $answer = $(this).find(‘.answer’);
if($answer.hasClass(‘open’)) {
$answer.removeClass(‘open’);
$answer.slideUp();

$(this).find(‘span’).text(‘+’);

} else {
$answer.addClass(‘open’);
$answer.slideDown();

$(this).find(‘span’).text(‘-‘);
}
});
});