我目前有一个简单的导航栏,它下面有一个向上箭头,当点击其中一个导航标题时,它会滑动。箭头从两个导航标题之间开始。单击导航标题时,也会滑入一些文本。
我想要这样,当再次点击导航标题时,下方的箭头会滑回其起始位置(这是一个名为 uparrow
的 css 类)。我不知道该怎么做
这是 html:
<div id="bottom">
<div class="middle">
<div class="titles">
<h3>
<a class="webdesign">Web Design</a>
<a class="appdesign">Application Development</a>
</h3>
</div>
<img class="uparrow" src="img/uparrow.png">
<hr>
</div>
<div class="bottom">
<h4>Web Design </h4>
<p>Blah</p>
</div>
<div class="bottom2">
<h4>Application Development</h4>
<p>Blah</p>
</div>
</div>
这是箭头的 css:
.uparrow {
width:20px;
}
.uparrowleft {
margin-right:180px;
transition: 0.5s ease;
}
.uparrowright {
margin-left:315px;
transition: 0.5s ease;
}
这里是箭头滑动的 jQuery:
$('.webdesign').click(function() {
$('.bottom2').hide(500);
$('.bottom').toggle(500);
$('.uparrow').removeClass('uparrowright');
$('.uparrow').addClass('uparrowleft');
});
$('.appdesign').click(function() {
$('.bottom').hide(500);
$('.bottom2').toggle(500);
$('.uparrow').removeClass('uparrowleft');
$('.uparrow').addClass('uparrowright');
});
最佳答案
这是您期望的吗?
Jsfiddle:https://jsfiddle.net/ek6ktsLg/
变化是 uparrowleft
和 uparrowright
上的 toggleClass
$('.webdesign').click(function() {
$('.bottom2').hide(500);
$('.bottom').toggle(500);
$('.uparrow').removeClass('uparrowright');
$('.uparrow').toggleClass('uparrowleft');
});
$('.appdesign').click(function() {
$('.bottom').hide(500);
$('.bottom2').toggle(500);
$('.uparrow').removeClass('uparrowleft');
$('.uparrow').toggleClass('uparrowright')
});
关于jQuery Nav滑动下划线修改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38697025/