[[返信する]]
クリックしたら表示される文字について
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
[編集]

[返信する]
[戻る]
×
「#ファンタジー」のBL小説を読む
BL小説 BLove
- ナノ -