Question

首先，我知道这个问题已经多次在这个网站上得到解答，这是这里的主要问题。我在答案中被选中，并且已经搜索了几个小时，没有找到任何直接相似的东西。必须有很多方法可以做到这一点，但我现在所拥有的最接近我想要的。

我现在有这个代码用于我的代码，由于某些原因，小提琴不起作用，虽然它在我的代码中工作正常，但一定是错过了。

HTML：

<div id="wrap">
    <p>This text is visible, but there is more.<a href="#" id="example-show"               class="showLink" onclick="showHide('example');return false;"><br/><br/>See more >></a>
    </p> 
    <div id="example" class="more">
        <p>Congratulations! You've found the magic hidden text! Clicking the link below
            will hide this content again.</p>
        <p><a href="#" id="example-hide" class="hideLink" 
            onclick="showHide('example');return false;">Hide this content >></a></p>
    </div>
</div>

Javascript：

function showHide(shID) {
       if (document.getElementById(shID)) {
          if (document.getElementById(shID+'-show').style.display != 'none') {
             document.getElementById(shID+'-show').style.display = 'none';
             document.getElementById(shID).style.display = 'block';
          }
          else {
             document.getElementById(shID+'-show').style.display = 'inline';
             document.getElementById(shID).style.display = 'none';
          }
       }
    }

我需要能够为每个新的＆＃34; Read More＆＃34;在页面上。目前，第一个＆＃34;查看更多＆＃34;始终是javascript的目标，我不知道如何为页面上的其他链接调用此函数。

Answer 1

在HTML中，每个id =＆＃34;＆＃34;必须是一个唯一的标识符，你不能把两个id =＆＃34;例子＆＃34;所以你需要id =＆＃34;例如＆＃34;和id =＆＃34; example2＆＃34;等等。

工作jsfiddle：http://jsfiddle.net/PVLMX/2/

<div id="wrap">
    <p>This text is visible, but there is more.<a href="#" id="example2-show"  
     class="showLink" onclick="showHide('example2');return false;"><br/><br/>See more >></a>
    </p> 
    <div id="example2" class="more">
        <p>This text was hidden, now you see it</p>
        <p><a href="#" id="example2-hide" class="hideLink" 
            onclick="showHide('example2');return false;">Hide this content >></a></p>
    </div>
</div>

我改变了什么：

每个id =＆＃34;示例..到id =＆＃34; example2 ...在第二个div中。
将脚本加载到＆＃34;没有包装 - ＆＃34;模式（jsfiddle左选项）

Answer 2

在你的小提琴中，你需要选择no wrap in <head>选项。你的代码工作正常。

http://jsfiddle.net/uND9H/

Aslo你不能有重复的id

Answer 3

如果你想概括一下，在jquery中有一种更简单的方法，即通过使用类，你可以绑定点击事件并使用类名来概括它们。这是一个例子，检查出来

    $('.showLink').bind('click',function(e){
      var obj = $(this).attr('id');

      var name = obj.replace("-show","-hidden");
      $('#'+name).css('display', 'inline-block'); 
    });

    $('.hideLink').bind('click',function(e){
      var obj = $(this).attr('id');
      var name = obj.replace("-hide","-hidden");
      $('#'+name).css('display', 'none'); 
    });

http://jsfiddle.net/AmarnathRShenoy/AMf8y/

您可以多次使用类名，并且必须始终记住ID永远不会重复

Answer 4

实际上你可以用jquery来做，比你想象的要容易得多

Jquery如下：

$more = $('.more');

$('.showLink').click(function(e){
    e.preventDefault();
    $more.show();
})

$('.hideLink').click(function(e){
    e.preventDefault();
    $more.hide();
})

还要在.more类上添加一个css样式来显示：none。你可以使用slideToggle（）

使它看起来更好一些

这是一个小提琴：http://jsfiddle.net/up36g/

在页面上多次隐藏/显示

4 个答案: