如何使用jQuery切換css的內容切換

Question

我有一個由css內容屬性組成的navicon。

的代碼看起來像這樣

#nav:before { 
    content: '='; 
} 

function navigation() { 
    $('#navigation').click(function() { 
     $('#toggle').slideToggle(600); 
     $('#toggle').css({ 
      'content': 'x' 
     }); 
    }); 
} 
window.onload = navigation; 

<nav id="toggle"> 
<ul> 
<li></li> 
</ul> 
</nav 

這是行不通的。如果用戶點擊x標記，我怎樣才能調用默認屬性？

Answer 1

你可以嘗試這樣的事情https://jsfiddle.net/2Lzo9vfc/149/

HTML

<button>BUTTON</button> 
<div class="nav pseudo"></div> 

JS

$('button').click(function() { 

    $('.nav').slideUp(function() { 
     var nav = $(this); 
     if(nav.hasClass('pseudo')) { 
      nav.removeClass('pseudo'); 
      nav.addClass('active'); 
     } else { 
      nav.removeClass('active'); 
      nav.addClass('pseudo'); 
     } 
    }).slideDown(); 

}); 

CSS

.nav { 
    padding: 5px; 
    border: 1px solid black; 
    display: inline-block; 
} 

.active:before { 
    content: "x"; 
} 

.pseudo:before { 
    content: "="; 
} 

Answer 2

也許這將幫助你..

function navigation() { 
 
    //$('#toggle').hide(); 
 
    $('#click-me').click(function() { 
 
     $('#toggle').slideToggle(600); 
 
     $('#toggle').attr('data-content','pppp'); 
 
    }); 
 
} 
 
$(document).ready(function(){navigation();});

#toggle:after { 
 
    content: attr(data-content); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="click-me">click me</button> 
 
<nav id="toggle" data-content="xxxeeeee"> 
 
</nav>