0

让我以我对网页设计的有限理解来开始我的问题。

我希望“-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>

提前致谢。

4

2 回答 2

3

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 代码通过识别 idexample1和来工作example2；通过将此数字传递给showHide()，代码可用于多个实例。）

这是给你的 JSFiddle：http: //jsfiddle.net/3Xawv/

于 2012-12-21T03:17:02.387 回答
0

真正的答案是使用 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 将返回实际接收到点击事件的元素——在本例中为链接。

于 2012-12-21T02:24:59.533 回答