來回切換上點擊

我有，當你再次點擊它，改變從+ 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

來回切換上點擊

回答

相關問題