質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.93%

on clickのエラー

受付中

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 788

labanda

score 14

前提・実現したいこと

ここに質問したいことを詳細に書いてください
on clickの<h2 class="more01">▼</h2>をクリックしたら、
隠した<li>タグを出したいです。
そして、<h2 class="more02">▲</h2>ボタンをクリックすると、隠したい。

発生している問題・エラーメッセージ

エラーメッセージ

  self.slide('$(this).bind(".atokara")');
// self.slide('$(this).next(".atokara")');
//↑..これは弟要素の時、<aside class="sankaku">を作らなかった場合は問題なかった。 

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>modal</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="css/style.css">
  <!-- <link rel="stylesheet" href="css/reset.css"> -->
</head>

<body>
  <div class="container">
    <h1>labanda's JavaScripts</h1>
    <nav>

      <section class="leftmenu">
       <button id="down_btn"></button>
       <h2 class="js01">JavaScript_01</p>
       <ul class="javabook">
         <li><a href="#" data-index="0">JavaScript 01</a></li>
         <li><a href="#" data-index="1">JavaScript 02</a></li>
       </ul>
       <aside class="sankaku">
         <h2 class="more01"></h2>
         <h2 class="more02"></h2>
       </aside>
       <ul class="atokara">
         <li><a href="#" data-index="1">JavaScript 03</a></li>
         <li><a href="#" data-index="1">JavaScript 04</a></li>
         <li><a href="#" data-index="1">JavaScript 05</a></li>
         <li><a href="#" data-index="1">JavaScript 06</a></li>
         <li><a href="#" data-index="1">JavaScript 07</a></li>
         <li><a href="#" data-index="1">JavaScript 08</a></li>
         <li><a href="#" data-index="1">JavaScript 09</a></li>
       </ul>
       <h2 class="js02">JavaScript_02</p>
      <ul>
        <li><a href="#" data-index="2">JavaScript_on click拡大</a></li>
        <li><a href="#" data-index="3">JavaScript_▼表示</a></li>
      </ul>
      <button id="up_btn"></button>
     </section>
     <section class="rightmenu">
       <div class="viewbox">
         <img src="">
       </div>
     </section>
    </nav>

 <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
 <script src="scripts/javascript.js"></script>

</body>
</html>

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;
}
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/ツール等のバージョンなど)

より詳細な情報

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • naomi3

    2017/01/27 19:53

    slideとは何ですか?jQueryにはslideUp,slideDown,slideToggleしかありませんが。

    キャンセル

  • labanda

    2017/01/28 00:25

    あ、自分が作った名前です。スライドさせようと思ってたので、、><

    キャンセル

  • kei344

    2017/01/29 20:42

    まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

    キャンセル

回答 2

+2

こんなかんじですか?

$(function(){
  $('.more02').hide();
  $('.atokara').hide();
  $('.more01,.more02').on('click',function(){
    $(this).hide();
    $(this).siblings('h2').show();
    $(this).parents('aside').siblings('ul.atokara').toggle();
  });
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/28 00:13

    ありがとうございます。
    色んな書き方があるんですね!!勉強になります。

    キャンセル

+2

求めている問題にはこれで動きはしますが

javabook.prototype.handleEvents = function() {
    var self = this;
      this.$more.on("click", function(){
        $(this).parents('aside').siblings('ul.atokara').show();

        return false;
        });
      this.$moremore.on("click", function(){
        $(this).parents('aside').siblings('ul.atokara').hide();

        return false;
        });
  };


たぶん、いい

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/28 00:12

    ありがとうございました。
    ちゃんと動きました。嬉しいです。
    siblingsの勉強にもなりました><

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る