如何使用 jQuery 切换更改 css 的内容答案

【问题标题】：How to change content of css using jQuery toggle如何使用 jQuery 切换更改 css 的内容
【发布时间】：2016-02-24 00:06:48
【问题描述】：

我有一个由 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标记时如何调用默认属性？

【问题讨论】：

我有导航的给予者ID切换
为样式元素提供样式标签
我还没有尝试简单的样式
您的代码中的主要问题是“您不应该在 ONLOAD SECTION 中使用 JQUERY”
按常规方式尝试 $(document).ready(function(){navigation();});

标签： javascript jquery html css

【解决方案1】：

你可以试试这样https://jsfiddle.net/2Lzo9vfc/149/

HTML

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

$('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: "=";
}

【讨论】：

【解决方案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>

【讨论】：