スパンクリックでテキストを表示

スパンをクリックするとリンクを表示し、その下に他のリンクを表示しようとしています。私はここでこれの他の例を見つけましたが、私は何らかの理由で動作しません。誰か見てみましょうか？ここに私のjsfiddleがあります。そしてここに私のコードです。スパンクリックでテキストを表示

1 - 最初の読み込み時にサブリンクを非表示にする必要があります。

2 - クリックすると何も起こりません。これは最終的にトグル・コマンを持ちますが、私は最初に基本コードを取得したいと思います。

<script> 
    $(".kids").hide(); 
    $("#more-kids").click(function() { 
    alert('showing'); 
    }); 
    </script> 


    <div class="information"> 
     <span><a href="http://example.com/-i-10.html">Terms</a></span> 
     <span id="more-kids">more</span><br /> 
     <span class="kids"><a href="http://example.com/14.html">First Child</a></span> 
     <span class="kids"><a href="http://example.com/15.html">Second Chlld</a></span> 
    </div>

出典

2017-11-23 user3052443

あなたはサブリンクによって何を意味していますか？ 'class = kids'を意味しますか？ – abbas

はい、正しいです。これらのリンクは、[more]をクリックするまで表示されません。そして、もう一度クリックすると隠れるはずです。 – user3052443

@ user3052443 jsfiddleの例では、このようなものが必要ですか？https://jsfiddle.net/kksd014q/4/ –

あなたはjsfiddleコードにjQueryライブラリを追加するのを忘れ：は、だからあなたの基本的なコードは動作しますが、それを追加します。

そして、あなたの願い、このコードは次のとおりです。

$(".kids").hide(); 
$("#more-kids").click(function() { 
$(".kids").toggle(); 
});

プレビューリンク：https://codepen.io/ziruhel/pen/LOrpQj

出典

2017-11-23 19:44:29

あなたのコードだけで結構です。 jQueryのバージョンにjQueryのバージョンを追加するだけです。

あなたがローカルプロジェクトでのjQueryを使用する場合は、CDN経由でそれを読み込むことができますかあなたはjQueryのダウンロードを気にしない場合、また、あなたのローカルストレージからそれをロードすることができます。

これは次のようになります。あなたはあなたのjsfiddleへのjQueryを追加する必要が

$(".kids").hide(); 
 
$("#more-kids").click(function() { 
 
alert('showing'); 
 
});

<!DOCTYPE html> 
 
<head> 
 
    <!-- use CDN or put the path of your downloaded jquery-min.js file into the source attribute --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="information"> 
 
    <span><a href="http://example.com/-i-10.html">Terms</a></span> 
 
    <span id="more-kids">more</span><br /> 
 
    <span class="kids"><a href="http://example.com/14.html">First Child</a></span> 
 
    <span class="kids"><a href="http://example.com/15.html">Second Chlld</a></span> 
 
    </div> 
 
</body>

出典

2017-11-23 19:55:50 oRole

。 Javascriptのプロパティ（javascriptボックスの左上にあるボタン）に移動して、フレームワーク&拡張機能の "JQuery 3.2.1"を選択することができます。
htmlスクリプトタグを使用してjQueryライブラリを接続するほうが良いので、この例のようにjsfiddleのプロジェクトにコピーすることができます。
id more-kidsのスパンをクリックすると、私が書いたコードにリンクが表示され、非表示になります。

$("#more-kids").click(function() { 
 
\t $(".kids").toggle(); //shows or hides links 
 
});

.kids{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="information"> 
 
    <span><a href="http://example.com/-i-10.html">Terms</a></span> 
 
    <span id="more-kids">more</span><br /> 
 
    <span class="kids"><a href="http://example.com/14.html">First Child</a></span> 
 
    <span class="kids"><a href="http://example.com/15.html">Second Child</a></span> 
 
</div>

出典

2017-11-23 21:24:05 Bern

スパンクリックでテキストを表示

答えて

関連する問題