下划线活动 link slideToggle (jQuery)

Question

我制作了一个文本页面，当用户使用 slideToggle() 单击 link 时，信息会弹出。

当您单击下一个 link 时，上一个文本段落会自动关闭（也使用 slideToggle）。

jQuery(document).ready(function() {
    jQuery('.textbox a').next('.textbox p').hide();
    jQuery('.textbox a').click(function() {
        $('.active').not(this).toggleClass('active').next('.textbox p').slideToggle();
        $(this).toggleClass('active').next().slideToggle();
    });
});

.textbox {
    width: 50px;
    text-align: center;
    float: left;
}

.textbox a {
    cursor: pointer;
}

<div id="textbox1" class="textbox">
    <a>Link1</a>
    <p>Text that is toggled.</p>
</div>
<div id="textbox2" class="textbox">
    <a>Link2</a>
    <p>Text that is toggled.</p>
</div>
<div id="textbox3" class="textbox">
    <a>Link3</a>
    <p>Text that is toggled.</p>
</div>
<div id="textbox4" class="textbox">
    <a>Link4</a>
    <p>Text that is toggled.</p>
</div>

如何让活动的 "link" 加下划线？我已经尝试了几件事，但我能得到的最接近的是，一旦一个激活，每个 link 都带有下划线。

Answer 1

您可以使用 CSS text-decoration:underline;.

无论您在CSS中做什么，只要您将其应用于.active class，它只会应用于活动link。

jQuery(document).ready(function() {
    jQuery(".textbox a").next(".textbox p").hide();
    jQuery(".textbox a").click(function() {
        $('.active').not(this).toggleClass('active').next('.textbox p').slideToggle();
        $(this).toggleClass('active').next().slideToggle();
    });
});

.textbox{           width: 50px;
                    text-align: center;
                    float: left;}

.textbox a{         cursor: pointer;}
/* This is the only line you need to add: */
/* Or you could use border-bottom:1px solid black; instead. */
.active {text-decoration:underline;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="textbox1" class="textbox">
    <a>Link1</a><p>Text that is toggled.</p>
</div>
<div id="textbox2" class="textbox">
    <a>Link2</a><p>Text that is toggled.</p>
</div>
<div id="textboxe" class="textbox">
    <a>Link3</a><p>Text that is toggled.</p>
</div>
<div id="textbox4" class="textbox">
    <a>Link4</a><p>Text that is toggled.</p>
</div>

下划线活动 link slideToggle (jQuery)

Underline active link slideToggle (jQuery)

html

jquery

underline

slidetoggle