如何使用jQuery切換更改CSS的內容

Question

我有一個由CSS content屬性制成的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

也許這會對您有幫助。

 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> 

Answer 2

您可以嘗試這樣的事情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: "=";
}