[英]How to change content of css using jQuery toggle
I have a navicon made of css content property. 我有一个由CSS content属性制成的navicon。
The code looks like this 代码看起来像这样
#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
This is not working. 这是行不通的。 How can I call default property when the user clicks the x
mark? 用户单击x
标记时如何调用默认属性?
maybe this will help you.. 也许这会对您有帮助。
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>
You can try something like this https://jsfiddle.net/2Lzo9vfc/149/ 您可以尝试这样的事情https://jsfiddle.net/2Lzo9vfc/149/
HTML 的HTML
<button>BUTTON</button>
<div class="nav pseudo"></div>
JS 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 的CSS
.nav {
padding: 5px;
border: 1px solid black;
display: inline-block;
}
.active:before {
content: "x";
}
.pseudo:before {
content: "=";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.