Question

我正在尝试显示链接，然后在单击某个范围时显示其下方的其他链接。我在这里找到了其他的例子，但由于某种原因，我的工作不起作用。请问有人看看吗？这是我的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>

Answer 1

您需要将jQuery添加到jsfiddle中。您可以转到Javascript属性（javascript框左上角的按钮），然后在Frameworks＆amp;上选择“JQuery 3.2.1”。扩展。
最好使用html脚本标记连接jQuery库，因此你可以在jsfiddle中将它复制到你的项目中，就像我在这个例子中所做的那样。
我写的代码在点击标识为more-kids的范围时显示和隐藏链接。

$("#more-kids").click(function() {
	$(".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>

Answer 2

您忘了将jQuery库添加到您的jsfiddle代码中：所以添加它，你的基本代码就可以了。

你希望这段代码是：

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

预览链接： https://codepen.io/ziruhel/pen/LOrpQj

Answer 3

你的代码很好。所有你需要做的就是将任何jQuery版本添加到你的jsfiddle。

如果你想在本地项目中使用jQuery，你可以通过CDN加载它，或者如果你不介意下载jQuery，你也可以从本地存储加载它。

这看起来像是：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

跨度单击显示文本

3 个答案: