Question

我在尝试从链接及其兄弟姐妹中添加/删除类时遇到了一些问题。我在<div class="collapse_content"> ... </div>中包含3组链接。我能够从同一个容器中的链接中添加和删除'Selected'类，但是如果我选择另一个容器（组）中的链接，那么之前选择的链接将不会删除它的类。

组中的每个链接都将页面加载到iframe中，因此它们都是静态链接。我在每组链接上面的jQuery中都有一个折叠切换功能。

基本上，我想知道是否有人可以帮我弄清楚为什么jQuery不会从与新选择的链接不同的组中的上一个链接中删除“选定”类。

任何帮助/建议表示赞赏。提前谢谢。

这是我到目前为止的代码。

- jQuery的 -

$(function() {

 //Add 'selected' class to A tag within class collapse_content
$('.collapse_content a').on('click', function(e){
 $(this).addClass('selected').siblings().removeClass('selected');
 $(this).find('.collapse_content a').removeClass('selected');
});

//toggle the componenet with class collapse_tab
$(".collapse_tab").click(function() {
 $(this).next(".collapse_content").slideToggle(500);
});
});

- HTML -

<div class="collapse_tab">Group 1</div>
    <div class="collapse_content">
        <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a><br>
        <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a><br>
        <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a><br>
        <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a><br>
    </div>

<div class="collapse_tab">Group 2</div>
    <div class="collapse_content">
        <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a><br>
        <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a><br>
        <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a><br>
        <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a><br>
    </div>

<div class="collapse_tab">Group 3</div>
    <div class="collapse_content">
        <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a><br>
        <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a><br>
        <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a><br>
        <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a><br>
    </div>

<div class="collapse_tab">Group 4</div>
    <div class="collapse_content">
        <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a><br>
        <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a><br>
        <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a><br>
        <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a><br>
    </div>

- CSS -

.collapse_tab {
    text-decoration:none;
    font-weight:bold;
    background-color:#0cf;
    color:#FFF;
    font-size:11px;
    padding: 2px;
    margin:0px;
    text-align:center;
    border:1px solid #09f;
    cursor: pointer;
}

.collapse_content {    
    font:Verdana, Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    font-size: 10px;
    background-color:#0cf;
    border:#fff 1px solid;
}

Answer 1

试试这个

$(function() {

 //Add 'selected' class to A tag within class collapse_content
$('.collapse_content a').on('click', function(e){
    $('.collapse_content a').removeClass('selected');
    $(this).addClass('selected');
});

//toggle the componenet with class collapse_tab
$(".collapse_tab").click(function() {
    $(this).next(".collapse_content").slideToggle(500);
});
});

Answer 2

这是因为在你的jQuery中你使用'this'，它只代表包含你点击的链接的div。如果您希望事件处理程序从所有链接中删除该类，而不管它们所处的'collapse_content'div，只需使用$（'。collapse_content a'）作为您的选择器而不是'this'。

removeClass来自分隔的div容器中的链接

2 个答案: