div内の複数のdivを非表示にする - JQuery

申し訳ありません、noobishの質問、私の最初のウェブサイト。div内の複数のdivを非表示にする - JQuery

".button" divをクリックすると、 ".container" div内のすべてのdivがフェードアウトまたは非表示になりますが、動作していないように思います。私は、jsを別々のファイルに保存したいと考えています。

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>MAIN</title> 
    <link rel='stylesheet' type='text/css' href='style.css' /> 
    <script type='text/javascript' src='script.js'> </script> 
</head> 

<body> 
    <div class="container"> 
     <div class="top"> 
      MENU 
     </div> 
     <div class="button"> 
      ^^^
     </div> 
    </div> 
</body>

CSS

.top { 
    /* Border */ 
    border: 5px solid gray; 
    width: 100px; 
    background-color: black; 
    /*Positioning*/ 
    margin-left: 25%; 
    margin-right: 25%; 
    top: 10px; 
    left: 0px; 
    position: absolute; 
    /*Text*/ 
    text-align: center; 
    font-family: Arial; 
    font-weight: bold; 
    font-size: 20px; 
    color: white; 
} 

.container { 
    /*Border*/ 
    border: 10px solid gray; 
    width: 200px; 
    height: 200px; 
    background-color: black; 
    /*Positioning*/ 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
} 

.button { 
    /*Border*/ 
    border: 2px solid gray; 
    background-color: black; 
    width: 98%; 
    /*Positioning*/ 
    margin-top: 90%; 
    margin-left: auto; 
    margin-right: auto; 
    /*Text*/ 
    text-align: center; 
    font-family: Arial; 
    font-size: 15px; 
    color: white; 
} 

.button:hover { 
    color: red; 
    font-weight: bold; 
}

JAVASCRIPT

$(document).ready(function() { 
    $('.button').click(function() { 
     $('.container').hide('fast'); 
    }); 
});

出典

2016-08-04 Shatzo Dat

'$（ '。container'）。find（ 'div'）。hide（ 'fast'）;'これを – guradio

とすると、コンテナの内容はすべてコンテナになります。また、ボタンがその内部にあるので、すべてを隠すことも確かですか？ –

アラートでテストすることはできますか（ "some text"）;クリックイベントが実際に処理されていることを確認しますか？ – VinhNT

あなたは、コンテナ内のすべてのdivを非表示にしたい場合は、あなたが使用することができます。

$('.container>div').hide('fast');

したがって、コンテナの直接の子であるdivだけが非表示になります。あなたが.containerのdiv

しかし、あなたの上のすべてのdivを非表示にする場合あなたのコードが正しいかに隠されたdiv要素内のdivを非表示にするには、一切使用:)

$(document).ready(function() { 
 
    $('.button').click(function() { 
 
     $('.container>div').hide('fast'); 
 
    }); 
 
});

.top { 
 
    /* Border */ 
 
    border: 5px solid gray; 
 
    width: 100px; 
 
    background-color: black; 
 
    /*Positioning*/ 
 
    margin-left: 25%; 
 
    margin-right: 25%; 
 
    top: 10px; 
 
    left: 0px; 
 
    position: absolute; 
 
    /*Text*/ 
 
    text-align: center; 
 
    font-family: Arial; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
    color: white; 
 
} 
 

 
.container { 
 
    /*Border*/ 
 
    border: 10px solid gray; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: black; 
 
    /*Positioning*/ 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    position: relative; 
 
} 
 

 
.button { 
 
    /*Border*/ 
 
    border: 2px solid gray; 
 
    background-color: black; 
 
    width: 98%; 
 
    /*Positioning*/ 
 
    margin-top: 90%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    /*Text*/ 
 
    text-align: center; 
 
    font-family: Arial; 
 
    font-size: 15px; 
 
    color: white; 
 
} 
 

 
.button:hover { 
 
    color: red; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>MAIN</title> 
 
    <link rel='stylesheet' type='text/css' href='style.css' /> 
 
    <script type='text/javascript' src='script.js'> </script> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
     <div class="top"> 
 
      MENU 
 
     </div> 
 
     <div class="button"> 
 
      ^^^
 
     </div> 
 
    </div> 
 
</body>

出典

2016-08-04 03:12:36 technico

私はそれが見えないので問題を解決するとは思わないjQueryのようなものがページに含まれています –

あなたのコメントにアーメン、そしてスニペットシステムに栄光をOPにこれを指摘する:) – technico

はないだろう問題はあなたのウェブページにJqueryを含めなかったことです

あなたのウェブページ上のクローズタグ</body>またはにあなたのウェブページを含めてください

<body> 
    <div class="container"> 
     <div class="top"> 
      MENU 
     </div> 
     <div class="button"> 
      ^^^
     </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

</body>

それとも

<head> 
    <title>MAIN</title> 
    <link rel='stylesheet' type='text/css' href='style.css' /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- add this --> 
    <script type='text/javascript' src='script.js'> </script> 
</head>

出典

2016-08-04 03:23:41

-1

役立つ回答をありがとうみんな。私はそれが意図したように働いている、私は将来より具体的になることを確認します。

私は今、これを再現するボタンを追加する作業をしています（この新しい知識では簡単にできるはずです）。

もう一度おねがいします！

出典

2016-08-04 13:48:38

div内の複数のdivを非表示にする - JQuery

答えて

関連する問題