按钮不起作用？

所以即时尝试在这里做的是显示和隐藏div当我点击按钮，但它不工作，我不知道为什么。按钮不起作用？

script 

$(document).ready(function(){ 

    $('article').addClass("hidden"); 

    $('#hide').click(function() { 
    var $this = $(this); 

     if ($this.hasClass("hidden")) { 
      $(this).removeClass("hidden").addClass("visible"); 

     } else { 
      $(this).removeClass("visible").addClass("hidden"); 
     } 
    }); 
});

这里是CSS

.hidden>div { 
    display: none; 
} 

.visible>div { 
    display: block; 
}

下面是HTML

<article> 
    <button type="button" id="hide"></button> 
    <div> 
     <img /> 
     <img /> 
    </div> 
</article>

来源

2016-02-07 iWillBeMaster

而不是放置条件，然后删除和添加类，您可以切换隐藏的类。

$(document).ready(function(){ 

    $('article').addClass("hidden"); 

    $('#hide').click(function() { 
    $('article').toggleClass('hidden') 
    }); 
});

看到这个工作演示：Toggle class

来源

2016-02-07 12:19:58

解决了我的一切都归功于问题 – iWillBeMaster

随意给予好评，让其他人得到受益。 –

您应该添加类hidden到article，而不是button

var $this = $(this).parent();

选择.hidden>div给第一个div增加风格与类hidden的元素的子。

来源

2016-02-07 12:15:34

$(document).ready(function(){ 

    $('article').addClass("hidden"); 

    $('#hide').click(function() { 

    if ($('article').hasClass("hidden")) { 

     $('article').removeClass("hidden").addClass("visible"); 

    } else { 

     $('article').removeClass("visible").addClass("hidden"); 
    } 

    }); 
});

您可以使用切换也

来源

2016-02-07 12:23:10 Stavros

jQuery有一个toggle功能隐藏和显示选定的元素。它也有hide和show函数，这意味着你的CSS是不需要的。

$(document).ready(function(){ 
 

 
    // Hide the div to start with. 
 
    $('#divToHide').hide(); 
 

 
    // When the button is clicked, toggle the div's visibility. 
 
    $('#hide').click(function() { 
 
    $('#divToHide').toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <article> 
 
    <button type="button" id="hide">Click me to toggle the visibility of the div</button> 
 
    <div id="divToHide"> 
 
     Hello World! 
 
    </div> 
 
    </article> 
 
</body>

来源

2016-02-07 12:43:22

按钮不起作用？

回答

相关问题