按钮单击触发下面的文本答案

【问题标题】：Button click Triggers Text Below按钮单击触发下面的文本
【发布时间】：2017-07-08 07:04:44
【问题描述】：

我想为一个按钮设置一个功能，使文本在点击时显示在其下方。

例如，当您点击“立即注册”按钮时，文字会出现在“您是会员，是还是不是？”按钮下方。

“是”和“否”将是根据您的回答方式将您带到不同页面的链接。

到目前为止我的按钮代码（只是完成了 html 和样式）：

<a href="/ticket-link" target="_blank" class="ticket-button">Sign Up  
Now</a>

我是这种功能的新手，所以任何帮助都将不胜感激！

谢谢！

【问题讨论】：

标签： javascript php jquery html button

【解决方案1】：

根据需要调整href 属性。

$('#btn').click(function() {
  $('#modal').fadeIn();
});

a {
  display: block;
  text-decoration: none;
  color: white;
  background-color: #333;
  width: 100px;
  padding: 20px;
  border-radius: 5px;
  margin: 0 auto;
}

#modal {
  width: 300px;
  height: 120px;
  background-color: #ccc;
  border-radius: 5px;
  margin: 0 auto;
  display: none;
}

#modal h3 {
  text-align: center;
  padding: 10px;
}

#modal a {
  width: 50px;
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  height: 10px;
  vertical-align: middle;
  line-height: 10px;
}

.btns {
  width: 200px;
  margin: auto;
}

a:hover {
  background-color: #666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="/ticket-link" target="_blank" class="ticket-button" id='btn'>Sign Up Now</a>

<div id='modal'>
  <h3>Are you a member?</h3>
  <div class='btns'>
    <a href="/ticket-link" target="_blank" class="ticket-button">Yes</a>
    <a href="/ticket-link" target="_blank" class="ticket-button">No</a>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以使用 onClick 函数取消隐藏其下方的文本或元素。

<a href="/ticket-link" onClick='document.getElementById("text").style.display="initial";' target="_blank" class="ticket-button">Sign Up Now</a>
<span style="display:none;" id="text">This is some text :D</span>

【讨论】：

【解决方案3】：

简单的方法：

<a href="/ticket-link" target="_blank" class="ticket-button" onclick="confirmSignup()">Sign Up Now</a>

<script>
function confirmSignup(){
  if(confirm("Are you sure?"))
  {
    window.location.href="http://somelocation.com/sign-up";
  }
}
</script>

【讨论】：

【解决方案4】：

就像@Pety Howell 所说，您可以使用 onClick 函数取消隐藏文本。这是使用 jQuery 的一种非常简单的方法。

$(function() {
	 		$('.link').on('click', function() {
	 			$('.span').addClass('open');
      });
});

.span {
  display: none;
}
.open {
  display: block;
}

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

<a href="#" class="link">Click me</a>
<span class="span">I'm hidden!</span>

工作小提琴：https://jsfiddle.net/3gr03yzn/4/

【讨论】：

【解决方案5】：

您可以使用 jQuery toggle() 函数。

HTML：

<button id="member">
Are you Member ?
</button>

<div class="answer">
<a href="#">Yes</a><br />
<a href="#">No</a>
</div>

JS：

$("#member").click(function() {
   $(".answer").toggle();
});

CSS：

.answer {
  display:none;
}

jsFiddle 上的working example。

希望对你有帮助

【讨论】：

【解决方案6】：

试试这个代码。 如果此代码对您有帮助，请投票

function execute(){
        var x =  document.getElementById('link_list');
        var y =document.getElementById('btn');
        if(x.style.visibility==="hidden"){
            y.style.visibility="hidden";
            x.style.visibility="visible";
        }
    }

<button onclick="execute()" id="btn">sign up</button>
<div id="link_list" style="visibility:hidden">
Are you a member, <button onclick="window.open('http://sparrolite.blogspot.in')">Yes</button>&nbsp;or &nbsp;<button onclick="window.open('google.com')">no</button>
    </div>

【讨论】：

【解决方案7】：

这里提到的大多数答案都使用

jQuery 或，
onclick 属性，即obtrusive javascript。

以下是使用 vanilla、unobtrusive JavaScript 实现所需行为的方法。

window.onload = function() {
  var button = document.querySelector('.ticket-button');
  var info = document.querySelector('.info');

  info.style.display = 'none';
  var dispalyInfo = false;

  button.onclick = function(e) {
    e.preventDefault(); /* prevent page from navigating to a new page onclick */
    if (dispalyInfo) {
      info.style.display = 'none';
      dispalyInfo = false;
    } else {
      info.style.display = 'initial';
      dispalyInfo = true;
    }
  }
}

.ticket-button {
  display: block;
}

<a href="/ticket-link" target="_blank" class="ticket-button">Sign Up Now</a>
<span class="info">Are you a member, <a href="#">yes</a> or <a href="#">no</a>?</span>

参考资料：

【讨论】：