Question

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

如果我点击上面的＆＃34;显示类别＆＃34; ，它应该显示内容类div，同时显示类别字应该是更改为隐藏类别。当我再次点击隐藏类别时，它应隐藏div并再次将该字词更改为显示类别。< / p>

如何在不使用Bootstrap崩溃的情况下实现它？

Answer 1

可以使用jquery toggle()方法来实现。

＆＃13;

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

＆＃13;

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

＆＃13;

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：

＆＃13;

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'];
})

＆＃13;

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

＆＃13;

显示div一旦点击链接并隐藏，再次点击相同的链接

3 个答案: