綁定兩個選擇器，一個用於addClass，另一個用於removeClass

Question

正如標題所說，如何綁定兩個選擇器來打開/關閉（添加和刪除類）的div？

簡單的HTML：

<div> 
<a href="#" class="open">Open</a> 
<div> 
<span class="close">X</span> 
</div> 
</div> 

一些jQuery的：

$(function() { 
    var $open = $("a.open"); 
    var $close = $("span.close"); 
    $open.on("click", function() { 
    var $this = $(this); 

    if ($this.hasClass("active")) { 
     $this.removeClass("active"); 
     $this.parent("div").removeClass("is-open"); 
    } else { 
     $this.addClass("active"); 
     $this.parent("div").addClass("is-open"); 
    } 
    }); 

    $close.on("click", function() { 
    // This and only this close should remove the active class from the div and remove the active class from "a". 

    }); 
}); 

再一次;如果我點擊「a」來打開div，然後按「span」來關閉div。哪種方法最好？

Answer 1

可以使用，

$close.on("click", function() { 
    var container = $(this).parent().parent(); 
    container.find(".active").removeClass("active"); 
    container.removeClass("is-open"); 

    }); 

Answer 2

你可以這樣做：

var $open = $("a.open"); 
 
var $close = $("span.close"); 
 
$open.on("click", function() { 
 
    var $this = $(this); 
 
    $this.addClass("active"); 
 
    $this.parent("div").addClass("is-open"); 
 
}); 
 
$close.on("click", function() { 
 
    $(this).closest('.is-open').removeClass('is-open'); 
 
    $(this).parent().prev().removeClass('active'); 
 
});

.is-open { 
 
    background: yellow; 
 
    border: solid 1px black; 
 
} 
 
.active { 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <a href="#" class="open">Open</a> 
 
    <div> 
 
    <span class="close">X</span> 
 
    </div> 
 
</div>