来回切换上点击

我有，当你再次点击它，改变从+ Expand文本- Close上点击后面的功能。这实际上只是一个基本的解决方案。我真的很希望能够CSS添加到+和-没有编辑的一切，在我.html()。我尝试添加一个跨度，但它似乎没有工作。我该怎么做呢？来回切换上点击

的JavaScript

$('.displaybutton').click(function(){ 
    $('#otherResponseList').toggle(); 
     if($(this).html() == '- Close'){ 
      $(this).html('+ Expand'); 
     } else { 
      $(this).html('- Close'); 
    } 
});

来源

2017-02-23 B Johnson

这听起来像你想的::after伪选择与content财产。至于JavaScript中，如果你能使用jQuery的toggleClass功能是一个班轮：

$('.toggle').click(function(){ 
 
    $(this).toggleClass('isOpen') 
 
});

.toggle{ 
 
    border:1px solid black; 
 
    cursor:pointer; 
 
    padding: 5px; 
 
} 
 
.toggle::after { 
 
    content:"+ expand"; 
 
} 
 
.toggle.isOpen::after { 
 
    content:"- close"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<span class="toggle"></span>

来源

2017-02-23 21:29:52 nvioli

你可以单独从内容+和-并把一切都在通过使用伪选择器的CSS。只需拨动JS中的一类，你可以用CSS目标。

document.getElementById('button').addEventListener('click',function() { 
 
    document.getElementById('div').classList.toggle('close'); 
 
})

.expand:before { 
 
    content: '+'; 
 
    color: green; 
 
} 
 
.expand:after { 
 
    content: 'expand'; 
 
} 
 
.close:before { 
 
    color: red; 
 
    content: '-'; 
 
} 
 
.close:after { 
 
    content: 'close'; 
 
}

<div id="div" class="expand"></div> 
 
<button id="button">click</button>

来源

2017-02-23 21:33:57

来回切换上点击

回答

相关问题