アットウィキロゴ
nicepaper @ ウィキ
アットウィキロゴ
nicepaper @ ウィキ
ページ一覧

前回記事付箋のようにクリックORタップしたら透過する仕組みを作る2ではクリックしたら非表示になる機能を作っていきました。 今回はボタンを押したら、付箋が非表示になり、再び押したら表示される仕組みを作っていきます。11月14日記事

イメージ
ボタンを押す前や2回押したとき

ボタンを押した後



目次




toggleメソッドを使っていきます。

toggleメソッドにはjqueryのバージョン毎に挙動が違うので、バージョンをよく確認して使ってください。

コード

HTML 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>jQueryでタップやクリックしたら消える付箋</title>
</head>
<body>
	<div id="wrapper">
    	<article class="list">
        	<dl>
            	<dt class="col1">りんご</dt>
                <dd class="col2">apple</dd>
            </dl>
            <p id="sticky1"></p>
            <button class="ans" id="btn01">答え(answer)</button>
        </article>
    	<article class="list">
        	<dl>
            	<dt class="col1">卵</dt>
                <dd class="col2">egg</dd>
            </dl>
            <button class="ans" id="btn02">答え(answer)</button>
            <p id="sticky2"></p>
        </article>
    </div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("#btn01").click(function () {
	$("#sticky1").toggle("slow");
});
$("#btn02").click(function () {
	$("#sticky2").toggle("slow");
});
</script>
</body>
</html>

CSS 

@charset "utf-8";
/* CSS Document */

#wrapper{
	margin: 10px auto;
	padding: 20px;
	border:1px solid #000;
	width:480px;
	min-height: 400px;
}
#wrapper article.list{
	width:480px;
	height:180px;
	background: #EEE;
	margin-bottom:10px;
	padding-top: 10px;
}
#wrapper article.list{
	position:relative;
}

#wrapper article.list dl dt.col1{
	width:220px;
	height: 100px;
	padding:10px;
	background: #FCC;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
#wrapper article.list dl dd.col2{
	width:220px;
	height: 100px;
	padding:10px;
	background: #CFC;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
#wrapper article.list p#sticky1{
	position:absolute;
	display: block;
	width:240px;
	height:120px;
	background: #FF0;
	vertical-align:middle;
	text-align:center;
	left:240px;
	top: 10px;
	z-index:1;
}
#wrapper article.list button.ans{
	width: 100px;
	height: 30px;
}



まとめ

toggleメソッドを使って非表示表示を設定していきました。

以上

「ボタンを押したら付箋が非表示・表示になる仕組みを作る3」をウィキ内検索
最終更新：2015年11月16日 14:42
添付ファイル