Aggiungi una classe all'elemento padre quando il menu a discesa Bootstraps 4 è aperto? - jquery, bootstrap-4

Mi stavo chiedendo come posso aggiungere una classe all'elemento padre quando Dropdown Bootstraps è aperto?

HTML:

<div class="item-content">

<div class="block-handle">
<div class="dropdown">
<a class="" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>
</a>

<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item draggable-trigger" href="">2</a>
<a class="dropdown-item" href="#">3</a>
</div>
</div>
</div>

</div>

JS

$(".dropdown").on("show.bs.dropdown", function () {
$(this).parent().parent().addClass("active");
});

Quindi quello che sto cercando di fare è aggiungere una classe attiva a div class = "item-content"

risposte:

Devi usare parents in jQuery anziché parent dal momento che non è un genitore diretto.

https://www.codeply.com/go/vObdBWFwnL

$(".dropdown").on("show.bs.dropdown", function () {
$(this).parents(".item-content").addClass("active");
});

Molto probabilmente vorresti anche gestire il hide evento...

$(".dropdown").on("hide.bs.dropdown", function () {
$(this).parents(".item-content").removeClass("active");
});