Как работает контекст `this` при клике на элемент `div` в jQuery?

Здравствуйте!

Давайте разберем проблемы с использованием `this` в вашем коде и попробуем понять, почему ваша функция `ShowDataFilter()` работает только на двойной щелчок. 

### 1. Проблема с `this` и назначением обработчика события

В вашем коде у вас есть HTML элемент:

```html
<div onclick="ShowDataFilter()" class="widget-title cus-category">Цвет</div>
```

При таком назначении обработчика события `onclick` контекст `this` внутри функции `ShowDataFilter()` будет ссылаться на объект `window`, а не на сам элемент, на который вы кликнули.

### 2. Перепишите обработчик с использованием jQuery

Лучше всего назначить обработчик события с помощью jQuery, чтобы вы могли правильно использовать контекст `this`. Вот пример, как это можно сделать:

```html
<div class="block">
    <div class="widget-title cus-category">Цвет<i class="cus-fa fa fa-angle-double-right" aria-hidden="true"></i></div>
    <ul class="cus-slide c-ip-attribute-filter__list" style="display: none">
        <!-- ваш список -->
    </ul>
</div>
```

И сам JavaScript код:

```javascript
$(document).ready(function() {
    $('.widget-title').click(function() {
        // Здесь 'this' ссылается на элемент div, который был нажат.
        var $filterList = $(this).siblings('.cus-slide');
        $filterList.toggle(); // показывает/скрывает список
    });
});
```

### 3. Пояснение

- Когда вы используете `$(this)`, это ссылается на элемент, на который вы кликнули — в данном случае, на `div` с классом `widget-title`.
- Метод `siblings()` получает все соседние элементы, которые отвечают селектору `'.cus-slide'`, таким образом, вы работаете непосредственно с элементом списка, относящимся к кликнутому заголовку.
- Метод `toggle()` переключает состояние видимости (`display: none` / `display: block`) для выбранного списка.

### Заключение

С помощью изменения назначения события и правильного использования `this` в jQuery, ваша функция будет корректно срабатывать при одном клике, и вы сможете избежать проблемы с двойным щелчком. Если у вас возникнут дополнительные вопросы, не стесняйтесь спрашивать!

Странное использование onclick атрибута и события on, нужно что-то одно. Если с атрибутом onclick, то будет так: 
 
 
<div class="block">
    <div onclick="ShowDataFilter(this)" class="widget-title cus-category">Цвет<i class="cus-fa fa fa-angle-double-right" aria-hidden="true"></i></div>
    <ul class="cus-slide c-ip-attribute-filter__list" style="display: none">
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_0" id="name_0" value="1">    <label for="name_0" class="custom-control-label cus-fw-adminLte-override">Черный (2129)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_1" id="name_1" value="1">    <label for="name_1" class="custom-control-label cus-fw-adminLte-override">Синий (910)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_2" id="name_2" value="1">    <label for="name_2" class="custom-control-label cus-fw-adminLte-override">Фиолетовый (185)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_3" id="name_3" value="1">    <label for="name_3" class="custom-control-label cus-fw-adminLte-override">Серый (696)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_4" id="name_4" value="1">    <label for="name_4" class="custom-control-label cus-fw-adminLte-override">Бордовый (168)</label></div>
    </ul>
</div>
<div class="block">
    <div onclick="ShowDataFilter(this)" class="widget-title cus-category">Тип<i class="cus-fa fa fa-angle-double-right" aria-hidden="true"></i></div>
    <ul class="cus-slide c-ip-attribute-filter__list" style="display: none">
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_0" id="name_0" value="1">    <label for="name_0" class="custom-control-label cus-fw-adminLte-override">Ободковая (6227)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_1" id="name_1" value="1">    <label for="name_1" class="custom-control-label cus-fw-adminLte-override">Лесочная (381)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_2" id="name_2" value="1">    <label for="name_2" class="custom-control-label cus-fw-adminLte-override">Безободковая (420)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_3" id="name_3" value="1">    <label for="name_3" class="custom-control-label cus-fw-adminLte-override">полуободковые (124)</label></div>
        <div class="custom-checkbox">    <input class="custom-control-input" type="checkbox" name="brand_4" id="name_4" value="1">    <label for="name_4" class="custom-control-label cus-fw-adminLte-override">маска (2)</label></div>
    </ul>
</div>
 
 
 
function ShowDataFilter(cusCategory) {
	$(cusCategory).toggleClass('red').siblings('.cus-slide').slideToggle(0);
}