Question

我目前正在使用此代码：

:javascript
  function showstuff(content#{g.id}){
   document.getElementById(content#{g.id}).style.display="block";
  }
  function hidestuff(content#{g.id}){
   document.getElementById(content#{g.id}).style.display="none";
  }

%div{ :id => "#{g.id}"}

  %h3 #{g.title}

  %p 
    #{g.excerpt}

  %a{:id => "more#{g.id}",:onclick => "showstuff('content#{g.id}')"} Read More

  %div{ :id => "content#{g.id}", :style => "display:none;"}

    %p #{g.content}


    %a{ :onclick => "hidestuff('content#{g.id}')"} Show Less

单击第一个链接（读取更多）后显示底部div，然后在单击第二个链接（显示更少）时再次隐藏它。我希望第一个链接在被点击后消失。因此，当底部div可见时，读取更多链接不是。

Answer 1

也许这会对你有帮助。

HTML

<div id="main" class="hide">
    <a id="more" onclick="showhide();">Read More</a>

    <div id="content">
        <p>div content</p>
        <a id="less" onclick="showhide();">Show Less</a>
    </div>
</div>

CSS

#main a { cursor: pointer; } /* without href attribute there's no pointer */
#content { background: lightgray; } /* just for display purposes */
#main.hide #more { display: inline; }
#main.hide #content { display: none; }
#main.show #more { display: none; }
#main.show #content { display: block; }

JAVASCRIPT

function showhide() {
    main_div = document.getElementById('main');
    if (main_div.className == 'hide')
        main_div.className = 'show';
    else
        main_div.className = 'hide';
}

单击后隐藏超链接（javascript）

1 个答案: