显示DIV一旦点击了一个链接隐藏当再次点击同一链接

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

如果我点击上面的“显示分类”，它应该显示的内容类格，并在同一时间显示类别字应该更改为隐藏类别。当我再次单击隐藏类别时，应该隐藏div，并且该单词应该更改为显示类别。显示DIV一旦点击了一个链接隐藏当再次点击同一链接

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

来源

2017-05-14 temp

试试这个代码：

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>

来源

2017-05-14 08:07:12

工作well.Thank你 – temp

不客气亲爱@temp –

它可以通过使用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>

来源

2017-05-14 08:03:11

谢谢你的很好的解决方案 – temp

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

来源

2017-05-14 08:13:10 wostex

谢谢你的答案 – temp

显示DIV一旦点击了一个链接隐藏当再次点击同一链接

回答

相关问题