显示脚本不能使用一个按钮（JQuery）答案

【问题标题】：Show script is not working with one button(JQuery)显示脚本不能使用一个按钮（JQuery）
【发布时间】：2017-03-07 18:22:46
【问题描述】：

我正在尝试通过一个按钮为我的信息页面制作隐藏和显示脚本，但这里该按钮仅用于隐藏脚本，但是当我第二次按下它时，它会显示（显示）信息但仅用于第二个，噗没了！

我目前正在学习它，所以我没有找到我犯错的地方！

这是代码 jQuery 脚本

$(document).ready(function(){

$("button.about").click(function(){
    $("div.info").show(1000);
});

$("button.about").click(function(){
    $("div.info").hide(1000);
});

按钮代码

<button herf="#" class="about">About Me</button>

div 标签

<div class="container-fluid bg1 text-center info">

【问题讨论】：

标签： jquery

【解决方案1】：

使用带有toggle() 方法的单击事件处理程序在它们之间切换，否则两者将同时触发。

$("button.about").click(function(){
    $("div.info").toggle(1000);
});

$("button.about").click(function() {
  $("div.info").toggle(1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button herf="#" class="about">About Me</button>


<div class="container-fluid bg1 text-center info">div</div>

您可以另外添加stop() 方法来停止当前动画队列。

$("button.about").click(function(){
    $("div.info").stop().toggle(1000);
});

$("button.about").click(function() {
  $("div.info").stop().toggle(1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button herf="#" class="about">About Me</button>


<div class="container-fluid bg1 text-center info">div</div>

使用animate() 方法将属性值设置为'toggle' 以切换这些css 属性。

$("button.about").click(function() {
  $("span.info").stop().animate({
    height: 'toggle',
    opacity:'toggle'
   }, 1000);
});

$("button.about").click(function() {
  $("span.info").stop().animate({
    height: 'toggle',
    opacity:'toggle',
    width:'toggle'
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button herf="#" class="about">About Me</button>


<span class="container-fluid bg1 text-center info" sttle="display:inline">div</span>

虽然参考slideToggle()和fadeToggle()方法。

【讨论】：

谢谢它的工作 :) 它是否适用于任何其他 JQ 效果？
@AkritKhanna：幻灯片使用：slideToggle，淡入淡出：fadeToggle
@AkritKhanna : 或animate 使用属性值作为'toggle'
有什么办法可以让分割默认隐藏，点击后只会显示。
@AkritKhanna：有几种方法，使用 jQuery $("div.info").hide() 或使用 css <div class="container-fluid bg1 text-center info" style="display:none">

【解决方案2】：

$( "button.about" ).click(function() {     
    if($('div.info:visible').length)
        $('div.info').hide( 1000);
    else
        $('div.info').show( 1000);        
});

【讨论】：

【解决方案3】：

您在同一个元素上注册了多个点击事件。一个在显露，一个在隐藏。这就是你看到奇怪行为的原因。

如果你想手动实现切换功能（不使用toggle() 函数），下面的代码应该可以做到

$( "button.about" ).click(function() {     
    if($('div.info:visible').length) // if visible
        $('div.info').hide(1000);   // hide it 
    else
        $('div.info').show(1000); // show it        
});

DEMO

【讨论】：

【解决方案4】：

为什么不简单地检查元素 (div) 是否可见？

像这样：

$("button.about").on("click", function(){
	$("div.info").is(":visible") ? 
  		$("div.info").hide(1000) : $("div.info").show(1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button href="#" class="about">About Me</button>
<div class="info">Info</div>

【讨论】：