0xD34F

$(document).click(function(e) {
  const $target = $(e.target);
  let $itemsToClose = $('.top-menu__item');

  if ($target.hasClass('top-menu__link')) {
    const $item = $target.closest('li');
    $item.toggleClass('top-menu__item_open').children('ul').slideToggle();
    $itemsToClose = $itemsToClose.not($item);
  }

  $itemsToClose
    .removeClass('top-menu__item_open')
    .children('ul')
    .slideUp();
});

try:
    skdjfald
except Exception as e:
    print(e)

Неудивительно, что не помогло - border-bottom вы определили для ссылки, а не изображения.

Определите класс для ссылок, содержащих изображение, и назначьте border: none ему:

.a-image {
  border: none;
}

<a class="a-image"><img src="...

Установим соответствие между слайдами и кнопками с помощью data-атрибута:

<div class="slide" data-slide="1">1</div>
<div class="slide" data-slide="2">1+1</div>
<div class="slide" data-slide="3">3.0001</div>

<div>
  <span class="step" data-slide="1"></span>
  <span class="step" data-slide="2"></span>
  <span class="step" data-slide="3"></span>
</div>

По клику на кнопку снимаем класс active там, где он есть, добавляем его кликнутой кнопке и слайду, чьё значение data-slide такое же, как у кнопки:

$(document).on('click', '.step', function() {
  $('.step.active, .slide.active').removeClass('active');
  $(this).addClass('active');
  $(`.slide[data-slide="${this.dataset.slide}"]`).addClass('active');
});

// по умолчанию сделаем активным первый слайд
$('.step').eq(0).click();

правильно ли использовать общий объект data

Нет.

Родительский компонент загружает данные и передаёт их посредством параметров в дочерние (ну или vuex используйте, если структура приложения сложнее).

В родителе:

<clients-list :rows="clients" :headers="clientsTableHeaders"></clients-list>

В дочернем компоненте:

Vue.component('clients-list', {
  props: [ 'rows', 'headers' ],
  ...
});

clientsTableHeader.email.show <...> как это можно использовать при обработке списка клиентов

Сделать вычисляемое свойство, которое будет представлять отфильтрованный массив заголовков (да, лучше сделать заголовки обычным массивом, так будет гораздо удобнее) по значению свойства show:

computed: {
  activeHeaders() {
    return this.headers.filter(n => n.show);
  },
},

При рендеринге таблицы перебирать этот массив:

<thead>
  <tr>
    <th v-for="header in activeHeaders">{{ header.title }}</th>
  </tr>
</thead>
<tbody>
  <tr v-for="row in rows">
    <td v-for="header in activeHeaders">{{ row[header.name] }}</td>
  </tr>
</tbody>

https://jsfiddle.net/jgneacxq/

preg_match_all('~<.+?>(.*?)<\/.+?>~', $str, $matches);
$result = $matches[1];

или, без регулярных выражений:

function getTexts($domNode) {
  $result = [];

  foreach ($domNode->childNodes as $n) {
    if ($n->nodeType === XML_TEXT_NODE) {
      $result[] = $n->nodeValue;
    } else if ($n->nodeType === XML_ELEMENT_NODE) {
      array_push($result, ...getTexts($n));
    }
  }

  return $result;
}

$doc = new DOMDocument();
$doc->loadHTML($str);
$result = getTexts($doc);

или, тоже без регулярных выражений:

$doc = new DOMDocument();
$doc->loadHTML($str);
$result = [];

foreach ((new DOMXPath($doc))->query('//text()') as $n) {
  $result[] = $n->nodeValue;
}

Обычный цикл, от нуля до 2 в степени указанного числа (не включая верхнюю границу), с шагом в единицу. Искомые комбинации нулей и единиц - двоичные представления счётчика цикла.

Пробовал приспособить setTimeout, пробовал им вызывать функцию, а к функции присвоить название.. Но не сработало..
Что я делаю не так?

Не знаю, что вы делаете не так - вы же не показали, как вы пытались использовать setTimeout. Осмелюсь предположить, что вы контекст потеряли.

SELECT f.*, GROUP_CONCAT(fc.cat_id)
FROM film f
LEFT JOIN film_category fc ON fc.film_id = f.id
GROUP BY f.id

SELECT *
FROM oc_product_option
WHERE product_id IN (
  SELECT product_id
  FROM oc_product_option
  GROUP BY product_id
  HAVING count(product_id) > 1
)

Да, можно сделать гораздо проще. Элементу задаёте transition:

#red {
  transition: opacity 0.2s;
}

Определяете класс, который будет изменять значение opacity:

#red.hidden {
  opacity: 0.5;
}

И переключаете его по клику:

$('#red').click(e => $(e.target).toggleClass('hidden'));

// или

document.querySelector('#red').addEventListener('click', e => {
  e.target.classList.toggle('hidden');
});

const splitArr = (arr, chunks) =>
  Array.from(
    { length: chunks },
    (_, c) => arr.filter((n, i) => i % chunks === c)
  );

или

const splitArr = (arr, chunks) =>
  arr.reduce((acc, n, i) => (
    (acc[i % chunks] = acc[i % chunks] || []).push(n),
    acc
  ), []);

Пробовал watch{} - не помогло.

Это потому что вы код внутри watch не обернули в nextTick.

const options = [ 'first', 'second', 'third', 'fourth' ];
const $table = $('table');

$('button').click(function() {
  $table.append(`
    <tr>
      <td>
        <select>
          <option disabled selected>-</option>
          ${options.map(n => `<option>${n}</option>`).join('')}
        </select>
      </td>
      <td>
        <button class="del">del</button>
      </td>
    </tr>
  `);

  updateDisabled();
});

$table
  .change(updateDisabled)
  .on('click', '.del', function() {
    $(this).closest('tr').remove();
    updateDisabled();
  });


function updateDisabled() {
  const $select = $table.find('select');
  const selectedOptions = $select.get().map(n => n.value);

  $select.find('option').prop('disabled', function() {
    return selectedOptions.includes(this.value);
  });
}

Потому, что

1. Вместо просто числа следует указывать пиксели: 300 ---> '300px'.

2. jsfiddle по умолчанию оборачивает код в window.onload, соответственно, функция, которую вы пытаетесь вызывать в инлайновом обработчике клика, не является глобальной. Используйте querySelector + addEventListener вместо инлайнового обработчика. (UPD. Исправили эту дичь, неактуально).

#xxxten.big {
  width: 300px;
}

document.querySelector('#xxxten').addEventListener('click', function() {
  this.classList.toggle('big');
});

Символы ^ и $ - знаете, что они означают? Начало и конец строки. Неудивительно, что не работает в "большом тексте".

t = 'text'
print('текст %s текст' % t)

mixins