顯示div一旦點擊鏈接並隱藏，再次點擊相同的鏈接

Question

<div class="col-md-10 col-sm-12 col-xs-12">
   <span>Show categories</span>
</div>
<div class="content"></div>

如果我單擊上面的“顯示類別” ，它應該顯示內容類div，同時顯示類別字應該更改為隱藏類別 。當我再次單擊隱藏類別時 ，它應該隱藏div和再次單詞應更改為顯示類別 。

如何在不使用Bootstrap崩潰的情況下實現它？

Answer 1

它可以通過使用jquery toggle()方法來實現。

 $('#cate').click(function(){ $('.content').toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-10 col-sm-12 col-xs-12"> <span id="cate">Show categories</span> </div> <div class="content">Hello</div> 

Answer 2

試試這段代碼：

 var flag = true; $('#dd').click(function() { //This $('.content').toggle(); $('#dd').html(flag == false ? "Hide categories" : 'Show categories') flag = !flag; //OR this $(".content").css("display", flag ? "block" : "none"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-10 col-sm-12 col-xs-12"> <span id="dd">Hide categories</span> </div> <div class="content"><h2>Some title here</h2>Something happening here!</div> 

Answer 3

沒有jQuery：

 var s = document.getElementById('switchme'); var c = document.getElementById('content'); c.style.display = 'none'; s.addEventListener('click', function(e) { [c.style.display, e.target.textContent] = (c.style.display === 'none') // check visibility ? ['block', 'Hide categories'] : ['none', 'Show categories']; }) 

 <div class="col-md-10 col-sm-12 col-xs-12"> <span id="switchme">Show categories</span> </div> <div class="content" id="content">Content</div>