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

问：

我正在尝试从一个按钮为我的信息页面制作隐藏和显示脚本，但这里的按钮仅适用于隐藏脚本，但是当我第二次按下它时，它会显示（显示）信息，但只有一秒钟，然后噗，它就消失了！

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

代码如下 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

评论

答：

4赞 Pranav C Balan 3/8/2017 #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（） 方法设置属性值以切换这些 css 属性。'toggle'

$("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（） 方法。

评论

1赞 Akrit Khanna 3/8/2017

谢谢，它奏效了:)它适用于任何其他 JQ 效果吗？

0赞 Pranav C Balan 3/8/2017

@AkritKhanna ：用于幻灯片：，淡入淡出：slideTogglefadeToggle

0赞 Pranav C Balan 3/8/2017

@AkritKhanna ：或将 property 的值用作animate'toggle'

0赞 Akrit Khanna 3/8/2017

有没有办法默认隐藏除法，当我们单击它时，只会显示它。

0赞 Pranav C Balan 3/8/2017

@AkritKhanna：有几种方式，使用jQuery或者使用css$("div.info").hide()<div class="container-fluid bg1 text-center info" style="display:none">

0赞 Vinaysingh Khetwal 3/8/2017 #2

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

0赞 Suresh Atta 3/8/2017 #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        
});

0赞 zerek 3/8/2017 #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>

上一个：在 Retrofit 客户端中访问 DataStore 首选项 [HILT]

下一个：将 Python 与 android 通信？