下划线活动链接 slideToggle (jQuery)答案

【问题标题】：Underline active link slideToggle (jQuery)下划线活动链接 slideToggle (jQuery)
【发布时间】：2015-07-17 06:45:18
【问题描述】：

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

当您单击下一个链接时，上一个文本段落会自动关闭（也使用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>

如何使活动的“链接”加下划线？我已经尝试了几件事，但我能得到的最接近的是，一旦一个链接处于活动状态，每个链接都带有下划线。

【问题讨论】：

标签： jquery html slidetoggle underline

【解决方案1】：

你可以使用 CSS text-decoration:underline;。

无论你在 CSS 中做什么，只要你将它应用到 .active 类，它只会应用到活动链接。

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>

【讨论】：