Q&A
slideとは何ですか？jQueryにはslideUp,slideDown,slideToggleしかありませんが。
###前提・実現したいこと
ここに質問したいことを詳細に書いてください
on clickの<h2 class="more01">▼</h2>をクリックしたら、
隠した<li>タグを出したいです。
そして、<h2 class="more02">▲</h2>ボタンをクリックすると、隠したい。
###発生している問題・エラーメッセージ
エラーメッセージ
self.slide('$(this).bind(".atokara")'); // self.slide('$(this).next(".atokara")'); //↑..これは弟要素の時、<aside class="sankaku">を作らなかった場合は問題なかった。
###該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>modal</title> 7 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 8 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"> 9 <link rel="stylesheet" href="css/style.css"> 10 <!-- <link rel="stylesheet" href="css/reset.css"> --> 11</head> 12 13<body> 14 <div class="container"> 15 <h1>labanda's JavaScripts</h1> 16 <nav> 17 18 <section class="leftmenu"> 19 <button id="down_btn">▼</button> 20 <h2 class="js01">JavaScript_01</p> 21 <ul class="javabook"> 22 <li><a href="#" data-index="0">JavaScript 01</a></li> 23 <li><a href="#" data-index="1">JavaScript 02</a></li> 24 </ul> 25 <aside class="sankaku"> 26 <h2 class="more01">▼</h2> 27 <h2 class="more02">▲</h2> 28 </aside> 29 <ul class="atokara"> 30 <li><a href="#" data-index="1">JavaScript 03</a></li> 31 <li><a href="#" data-index="1">JavaScript 04</a></li> 32 <li><a href="#" data-index="1">JavaScript 05</a></li> 33 <li><a href="#" data-index="1">JavaScript 06</a></li> 34 <li><a href="#" data-index="1">JavaScript 07</a></li> 35 <li><a href="#" data-index="1">JavaScript 08</a></li> 36 <li><a href="#" data-index="1">JavaScript 09</a></li> 37 </ul> 38 <h2 class="js02">JavaScript_02</p> 39 <ul> 40 <li><a href="#" data-index="2">JavaScript_on click拡大</a></li> 41 <li><a href="#" data-index="3">JavaScript_▼表示</a></li> 42 </ul> 43 <button id="up_btn">▲</button> 44 </section> 45 <section class="rightmenu"> 46 <div class="viewbox"> 47 <img src=""> 48 </div> 49 </section> 50 </nav> 51 52<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 53<script src="scripts/javascript.js"></script> 54 55</body> 56</html> 57 58```css
- {
margin: 0;
padding:0;
list-style: none;
vertical-align: bottom;
}
body {
}
.container {
width: 100%;
margin: 0;
}
ul, li{
list-style: none;
margin: 10px;
font-size: 1.3rem;
}
h1 {
font-size: 3rem;
color: #008080;
margin: 40px 50px;
}
h2 {
font-size:2rem;
}
nav {
display: flex;
width: 100%;
}
section .atokara {
display: none;
}
.viewbox {
border: 3px solid #20b2aa;
/margin:10px 100px;/
width: 550px;
height: 400px;
}
nav .leftmenu {
text-align: center;
padding: 10px 0 0 50px;
}
#down_btn, #up_btn {
border: 1px solid #000000;
background-color: #fff;
font-size: 1.3rem;
border-radius: 10px;
width: 20px;
}
.sankaku {
display: flex;
}
.more01, .more02 {
width:40%;
border: 1px solid #000000;
border-radius: 10px;
font-size: 1.3rem;
margin: 5px 5px;
}
.more01:hover, .more01:active{
color: red;
border: 1px solid red;
}
.more02:hover, .more02:active{
color: red;
border: 1px solid red;
}
section .viewbox {
margin:20px 0 0 150px;
}
/ここはクリックで画像が拡大表示/
.box ul, li{
list-style: none;
margin: 10px;
}
.box ul {
margin-top: 50px;
}
.bbox {
border: 3px solid #fff;
margin-top:50px;
}
```js function javabook(el) { this.initialize(el); } javabook.prototype.initialize = function(el) { //表す場所を指定する＄で this.$el = el; this.$lemenu =$("leftmenu"); this.$ribox = $(".rightmenu"); this.$atomore = $(".atokara") this.$more = $(".more01"); this.$moremore = $(".more02"); this.handleEvents(); }; javabook.prototype.handleEvents = function() { var self = this; this.$more.on("click", function(){ self.slide('$(this).find(".atokara")'); // self.slide('$(this).next(".atokara")'); //↑..これは弟要素の時、<aside>を作らなかった場合は問題なかった。 return false; }); }; new javabook($(".javabook a"));
###試したこと
親子関係、兄弟関係は全部やってみました。残念ながら、、うまく行かずです。
教えてください！！ 宜しくお願いします。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
あ、自分が作った名前です。スライドさせようと思ってたので、、＞＜
まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。
回答2件
0
こんなかんじですか？
javascript
1$(function(){ 2 $('.more02').hide(); 3 $('.atokara').hide(); 4 $('.more01,.more02').on('click',function(){ 5 $(this).hide(); 6 $(this).siblings('h2').show(); 7 $(this).parents('aside').siblings('ul.atokara').toggle(); 8 }); 9});
投稿2017/01/27 11:06
総合スコア114779
0
求めている問題にはこれで動きはしますが
JavaScript
1javabook.prototype.handleEvents = function() { 2 var self = this; 3 this.$more.on("click", function(){ 4 $(this).parents('aside').siblings('ul.atokara').show(); 5 6 return false; 7 }); 8 this.$moremore.on("click", function(){ 9 $(this).parents('aside').siblings('ul.atokara').hide(); 10 11 return false; 12 }); 13 };
たぶん、良い感じなのはあるかと思いますね...
投稿2017/01/27 12:56
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
