うよきょくせつ

目次 表示/非表示ボタンの設置 PCはうまくいくけどスマホではうまくいかない時の対処法

目次の表示/非表示ボタンを設置しました。

その際、コピペではPC版はうまく表示されるのにスマホではうまく表示されなかったので、その対処法を自分用に載せています。

 

うまくできなかった人は参考にしてください。

 

参考にしたサイト様がこちら↓

www.yone-himajin.com

 

PCのデザイン>ヘッダ>タイトル下に下記のコードをコピペ

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
// 目次 表示/非表示ボタン
$(function(){
var $Contents = $(".table-of-contents")
$($Contents).before('<span style="font-size: 150%; color: #333;">目次</span><p class="show-area">[表示]</p>');
$(".show-area").click(function(){
var $this = $(this);
if($Contents.css('display') == 'none'){
$Contents.slideDown(400),
$this.text("[非表示]");
}else{
$Contents.slideUp(400),
$this.text("[表示]")
};
});
});
</script>

 

 

次に、デザインcssに下記のコードをコピペ

 

  .table-of-contents{
    display:none
  }

  .show-area{
    cursor: pointer;
    color: #47a1e5
  }

 

 

 

これでpc版は目次の表示/非表示ボタンができました。

 

 

次にスマホですが、

ヘッダ>タイトル下に下記のコードをコピペしました。

<style type="text/css"> 
  .show-area{
    color: #47a1e5
  }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
// 目次 表示/非表示ボタン
$(function(){
    var $Contents = $(".table-of-contents")
    $($Contents).before('<span style="font-size: 150%; color: #333;">目次</span><p class="show-area">[表示]</p>');
    $(".show-area").click(function(){
        var $this = $(this);
        if($Contents.css('display') == 'none'){
            $Contents.slideDown(400),
            $this.text("[非表示]");
        }else{
            $Contents.slideUp(400),
            $this.text("[表示]")
        };
    });
});
</script>

 

 

 

 

すると、スマホ版では

目次[表示] の下に見出しが続いていました。

本当はPCと同様に、 目次[表示] だけにして見出しを非表示にしたかったんですが・・・。

 

他のコピペOKのサイト様のコードをコピペしてみたんですが、全てスマホではうまく表示されませんでした。

 

 

色々やった挙句の解決策が下記のコードです。

 

<style type="text/css"> 
.table-of-contents{
display:none
}
.show-area{ color: #47a1e5 } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> // 目次 表示/非表示ボタン $(function(){ var $Contents = $(".table-of-contents") $($Contents).before('<span style="font-size: 150%; color: #333;">目次</span><p class="show-area">[表示]</p>'); $(".show-area").click(function(){ var $this = $(this); if($Contents.css('display') == 'none'){ $Contents.slideDown(400), $this.text("[非表示]"); }else{ $Contents.slideUp(400), $this.text("[表示]") }; }); }); </script>

 

<style type="text css"></style>の間に、

 .table-of-contents{
    display:none
  }

を追加しています。

 

とりあえずこれでスマホでも正常に表示されるようになったので良かったです。