Question

让我以我对网页设计的有限理解为我提出问题。

我希望“-More-”文本在单击时变为“-Less-”，然后再次单击时返回“-More-”。

我正在尝试修改的代码中已经存在一些javascript。这可以与我要求的结果相结合吗？

我的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';
    }
  }
}

我的HTML如下：

  <div class="accordion">
    <p>1. Decide
    <a href="#" id="exampleone-show" class="showLink"
    onclick="showHide('exampleone');return false;"><div class="btn_show">-More-</div></a>
    <p></p>
  </div>
  <div id="exampleone" class="more">
    <p>Blah Blah Blah.</p>
  </div>

提前致谢。

Answer 1

jQuery不需要执行此功能，它只会使整个脚本更加繁琐和缓慢。只需使用这个纯JavaScript解决方案：

function showHide(i) {
if (document.getElementById("example"+i).innerHTML=="-More-") {
    document.getElementById("example"+i).innerHTML="-Less-";
    document.getElementById("more"+i).style.display = 'block';
}
else if (document.getElementById("example"+i).innerHTML=="-Less-"){
    document.getElementById("example"+i).innerHTML="-More-";
    document.getElementById("more"+i).style.display = 'none';
}
}

此代码使用i作为参数，定义需要更改的链接/ div。对于您的HTML，请使用：

<div class="accordion">
<p>1. Decide</p>
    <a href="#" id="**example1**" class="showLink" onclick="**showHide(1)**">-More-</a>
</div>
<div id="**more1**" class="more" style="display:none;">
    <p>Blah Blah Blah.</p>
</div>

基本上，您可以根据需要多次复制此HTML代码。只需确保以双星号更改代码部分。（JavaScript代码的工作原理是识别example1和example2等ID;通过将此数字传递给showHide()，代码可用于多个实例。）

这是一个适合你的JSFiddle：http://jsfiddle.net/3Xawv/

Answer 2

真正的答案是使用jQuery，但你可以做这样的事情，像这样传递click事件：

 <a href="#" id="exampleone-show" class="showLink"
onclick="showHide('exampleone', event);return false;">

然后在JS方面

function showHide(shID, e) {
    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';
        }
    }
    target = e.target;
    element = target.getElementsByClassName('btn_show');
    html = element.innerHTML;
    element.innerHTML = "";
    if (html.indexOf("-More-") != -1) {
        element.innerHTML = "-Less-";
    } else if (html.indexOf("-Less-") != -1) {
        element.innerHTML = "-More-";
    }
}

澄清：e.target将返回实际收到点击事件的元素 - 在这种情况下是一个链接。

单击更改具有不同文本的文本

2 个答案: