2016-02-07 238 views
0

所以即時嘗試在這裏做的是顯示和隱藏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> 

回答

0

而不是放置條件,然後刪除和添加類,您可以切換隱藏的類。

$(document).ready(function(){ 

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

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

看到這個工作演示:Toggle class

+0

解決了我的一切都歸功於問題 – iWillBeMaster

+0

隨意給予好評,讓其他人得到受益。 –

2

您應該添加類hiddenarticle,而不是button

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

選擇.hidden>div給第一個div增加風格與類hidden的元素的子。

0
$(document).ready(function(){ 

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

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

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

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

    } else { 

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

    }); 
}); 

您可以使用切換也

0

jQuery有一個toggle功能隱藏和顯示選定的元素。它也有hideshow函數,這意味着你的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>