Как изменить содержимое css с помощью jQuery toggle

Question

У меня есть навигатор, созданный из свойства содержимого CSS.

код выглядит следующим образом

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