显示隐藏内容后如何隐藏链接？答案

【问题标题】：How can I hidden a link after displaying the content hidden?显示隐藏内容后如何隐藏链接？
【发布时间】：2017-05-01 09:18:52
【问题描述】：

我想知道当有人点击链接/按钮“Link with href”时如何隐藏它。它显示一个带有文本的新 div ("Anim pariatur cliche reprehenderit, enim ...!)

请在此处找到示例http://v4-alpha.getbootstrap.com/components/collapse/#example

我已尝试在此处复制并跳过 Bootstrap 示例，但由于某种原因，它无法与 sn-p 一起正常工作。

谢谢

安德烈斯

【问题讨论】：

最简单的方法就是添加一个onClick="$(this).hide()"。假设您使用的是 jQuery，或者任何可以设置 display: none 的原生 javascript
您能给我们提供一个代码sn-p吗？

标签： javascript jquery twitter-bootstrap

【解决方案1】：

这是原生 javascript 和 jQuery 中的一个简单的单行函数。

Javascript：

原生 javascript 给按钮一个新的display: 样式：

var button = document.getElementsByTagName('button')[0];

function hideButton() {
    button.style.display = 'none';
}

button.addEventListener('click', hideButton, false);

&lt;button type="button"&gt;Link with href&lt;/button&gt;

jQuery：

jQuery 库使用专有的 jQuery 方法：hide():

$(document).ready(function(){
    
    $('button').click(function(){
        $(this).hide()});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button">Link with href</button>

【讨论】：

谢谢！ :) 这就是我想要的。

【解决方案2】：

不清楚你想要完成什么，但如果你想要像引导示例一样的效果，你可以这样做：

（使用 jQuery）

$("a.slide").click(function () {
  $("div.toggle-slide").slideToggle();
});

// or use fade

$("a.fade").click(function () {
  $("div.toggle-fade").fadeToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <a href="#" class="slide">Toggle Element(slide)</a>

  <div class="toggle-slide" style="display:none">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>
<!--  Or use fade -->

<div>
  <a href="#" class="fade">Toggle Element (fade)</a>

  <div class="toggle-fade" style="display:none">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

【讨论】：

谢谢大家的回复。