jQuery Nav 滑动下划线修改答案

【问题标题】：jQuery Nav Sliding Underline ModifyjQuery Nav 滑动下划线修改
【发布时间】：2016-08-01 10:55:06
【问题描述】：

我目前有一个简单的导航栏，它下方有一个向上箭头，当单击其中一个导航标题时会滑动。箭头从两个导航标题之间开始。当点击导航标题时，也会滑入一些文字。

我希望这样当再次单击导航标题时，下方的箭头会滑回其起始位置（这是一个名为 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');
});

【问题讨论】：

标签： jquery html css

【解决方案1】：

这是你所期望的吗？

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')
});

【讨论】：