teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

4

contentsを複数配置してもいいようにした

2017/05/10 06:27

投稿

root_jp
root_jp

スコア4666

answer CHANGED
@@ -16,11 +16,11 @@
16
16
  ```JavaScript
17
17
  $(function() {
18
18
  $(".contents_btn").on("click", function() {
19
+ var btnObj = $(this);
19
- var contentsObj = $("div.contents");
20
+ var contentsObj = btnObj.closest("div.btn_area").prev("div.contents");
20
- $(this).attr("src", contentsObj.is(":hidden") ? "img/pc/btn_close.png" : "img/pc/btn_open.png");
21
+ btnObj.attr("alt", contentsObj.is(":hidden") ? "img/pc/btn_close.png" : "img/pc/btn_open.png");
21
22
  contentsObj.slideToggle("slow");
22
23
  $(window).scrollTop(contentsObj.offset().top);
23
24
  });
24
25
  });
25
-
26
26
  ```

3

スライド速度をslowにした

2017/05/10 06:27

投稿

root_jp
root_jp

スコア4666

answer CHANGED
@@ -18,7 +18,7 @@
18
18
  $(".contents_btn").on("click", function() {
19
19
  var contentsObj = $("div.contents");
20
20
  $(this).attr("src", contentsObj.is(":hidden") ? "img/pc/btn_close.png" : "img/pc/btn_open.png");
21
- contentsObj.slideToggle();
21
+ contentsObj.slideToggle("slow");
22
22
  $(window).scrollTop(contentsObj.offset().top);
23
23
  });
24
24
  });

2

組み込み方を追記

2017/05/10 06:22

投稿

root_jp
root_jp

スコア4666

answer CHANGED
@@ -10,4 +10,17 @@
10
10
  これでどうでしょう?
11
11
  ```JavaScript
12
12
  $(window).scrollTop($(this).prev("div.contents").offset().top);
13
+ ```
14
+
15
+ ###追記(動くもの)
16
+ ```JavaScript
17
+ $(function() {
18
+ $(".contents_btn").on("click", function() {
19
+ var contentsObj = $("div.contents");
20
+ $(this).attr("src", contentsObj.is(":hidden") ? "img/pc/btn_close.png" : "img/pc/btn_open.png");
21
+ contentsObj.slideToggle();
22
+ $(window).scrollTop(contentsObj.offset().top);
23
+ });
24
+ });
25
+
13
26
  ```

1

追記

2017/05/10 06:19

投稿

root_jp
root_jp

スコア4666

answer CHANGED
@@ -4,4 +4,10 @@
4
4
 
5
5
  ```JavaScript
6
6
  $(window).scrollTop($(this).offset().top);
7
+ ```
8
+
9
+ ###追記(ボタンを移動したくない場合)
10
+ これでどうでしょう?
11
+ ```JavaScript
12
+ $(window).scrollTop($(this).prev("div.contents").offset().top);
7
13
  ```