Есть список дропдаунов(Bootstrap3).Код одного из них:
<li class="col-md-3 col-xs-12 filter-item">
<div class="sidebar">
<div class="dropdown widget">
<button class="dropdown-filter widgettitle title dropdown-toggle" type="button" data-toggle="dropdown" >
<span class="filter-name">SORT BY</span>
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu product-categories">
<li class="cat-item">
Item1
</li>
<li class="cat-item">
Item2
</li>
<li class="cat-item">
Item2
</li>
</ul>
</div>
</div>
</li>
Задача при открытии дропдауна по клику,придать ему обводку сверху,слева и справа. Напилил следующий скрипт:
$(document).ready(function () {
$(".filter-item .sidebar .dropdown", this).on("click", function(){
$(".filter-item .sidebar .dropdown").each(function(){
$(this).find("button").css ('border', '1px solid transparent'); // В данном цикле очищаются границы у всех 3 дропдаунов(без него если открыть один дропдаун,потом кликнуть на другой, у кнопки первого остаются границы)
});
$(this).find("button").css ({'border-top': '1px solid #cccccc',
'border-left': '1px solid #cccccc',
'border-right': '1px solid #cccccc'
});// Здесь по задумке должны присваиваться границы кнопке
if( !$(this).hasClass('open') ) {
$(this).find("button").css ('border', '1px solid transparent');
}
});// Тут я проверяю,если дропдаун открыт. Если закрыт,то границ быть не должно
});
К сожалению, отрабатывает код не так как хотелось бы. При клике на кнпоку дропдауна,он открывается,но кнопка не получает border. Когда закрываю дропдаун, границы появляются(ощущение,что он в любом случае попадает в if).В чем ошибка?