Question

我试图通过一个按钮为我的信息页面制作隐藏和显示脚本，但此处按钮仅用于隐藏脚本但是当我第二次按下它时，它显示（显示）信息但仅一秒钟和 Poof 它消失了！

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

这里是代码 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 tag

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

Answer 1

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 2

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

Answer 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

Answer 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>

显示脚本无法使用一个按钮（JQuery）

4 个答案: