[[返信する]]
クリックしたら表示される文字について
by ゆに
2018-09-17 03:26
類似の質問が見当たらなかったのでトピを作成しました。
もし類似のものがありましたら、お手数ですが誘導お願いします。
小説機能で、文字をクリックしたら下に隠れた文字が表示され、またクリックすると消える、というタグを使用しています。
Androidからでは正常に作動するのですが、iPhoneではクリックしても作動しません。
もしかしたらiPhone(サファリ)の設定に問題があるのかもしれませんが、タグに問題が無いか教えていただきたいです。
以下にタグを記載しました。どうぞよろしくお願い致します。
「表紙画面レイアウト」
<span id="hatena_link">クリックする文字</span>
<div id="hatena_box">
隠す文字
</div><div id="menu">
#list#
</div>
pc
[編集]
by ゆに
2018-09-17 03:31
申し訳ありません。
パスワードを間違えて入力したらしく分からなくなったので、こちらに書きます。
HEAD内のタグも記載しようとしたのですが、「使用できない文字列が含まれています」と赤字で表示されどうしても記載できませんでした。
pc
[編集]
by と
2018-09-17 15:28
HEAD内がないとアドバイスがもらえないと思います。
助け合い掲示板の方では「.」ドットが書き込めないとの報告がありましたので、試しに「.」ドットの部分を「・」などの別の記号に置き換えてみるか、別のブラウザから書き込んでみてください。
pc
[編集]
by ゆに
2018-09-20 01:07
と様、アドバイスありがとうございます。
「.」を「・」にしてHEAD内を記載しました。
改めてよろしくお願い致します。
「HEAD内」
<link href='http://fontsgoogleapis・com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>
<style type="text/css"><!--
@media screen and (min-width: 500px){
#all{
width: 500px;
margin: 0px auto;
}
}
body{
background: #d3d3d8;
font-family: "Homemade Apple","メイリオ";
font-size: 10pt;
color: #001e43;
letter-spacing: 4px;
line-height: 150%;
}
br{
letter-spacing: 0px;
}
.center{
text-align: center;
}
#contents{
margin: 20px;
}
#hatena_box{
display: none;
}
#hatena_box{
margin-top: 15px;
}
#menu{
margin: 15px 0px;
text-align: center;
}
#hatena_link,a{
color: #003f8e;
text-decoration: none;
cursor: help;
}
--></style>
<script src="http://ajax・googleapis・com/ajax/libs/jquery/1・11・2/jquery・min・js"></script>
<script type="text/javascript">
$(function(){
$("#hatena_link")・click(function(){
$("#hatena_box")・slideToggle("600");
});
});
</script>
pc
[編集]
by 774
2018-09-20 09:19
cssに以下を足してみてください。
<smartphone>
#hatena_link{ cursor: pointer !important;}
</smartphone>
詳細は「jquery click ios」あたりで検索を。
HEADです。
pc
[編集]
by ゆに
2018-09-25 00:53
774様、ありがとうございます。
cssとは、具体的にどこになるのでしょうか?
何ヶ所かに入れてみても上手くいきませんでした。
教えていただいた詳細のワードで検索もしたのですが、知識が無さすぎてよく意味が分からず……
申し訳ないのですが、詳しく教えていただけると助かります。
pc
[編集]
by 774
2018-09-28 12:59
<style type="text/css"></style>間の指定がcssです。 わからない単語がある場合はまず検索をしてみましょう。
下に書いた指定が優先して反映されるので、とりあえず<!--と-->の間の一番下にでも足しておいてください。
さらっと説明すると、<a href="">(リンク)などの「タップする前提」以外の要素(<span>や<div>など)をトリガーにしていると、iosでは動作しないようです。
対象要素に『cursor:pointer;』を指定すると回避できるはずなのですが、駄目だった場合は下記3パターンをそれぞれ試してみてください。
▼1
全体レイアウト内、トリガーを下記に変更する
<a href="#" id="hatena_link">文字</a>
▼2
全体レイアウト内、トリガー下記に変更する
<span id="hatena_link" onclick="">文字</span>
▼3
HEAD内、以下の置き換え
$("#hatena_link")・click(function(){
↓
$(document).on("click", "#hatena_link", function() {
pc
[編集]
by ゆに
2018-09-29 17:11
774様、ご丁寧にありがとうございました。
教えていただいたものを試したのですが、上手く動作しませんでした。
どこに問題があるのかは分かりませんが、このタグを使うのはやめておこうと思います。
色々教えていただいたのに申し訳ありません。
ありがとうございました。
pc
[編集]
[返信する]
[戻る]