jQuery: не срабатывает событие после клика

Question

В действии: http://3.alphenweer.nl/weer/
Код:

    $(document).ready(function(){
        $('.categorie[data-cat]').click(function(){
            $('#cat-'+ $(this).attr('data-cat')).slideToggle('slow');
        });
    });

<span class="categorie" data-cat="nieuws">Nieuws</span>
<div class="box" id="box-nieuws">
    <a href="/pages/nieuws/nieuws/alphen.php">Alphen</a>
    <a href="/pages/nieuws/nieuws/nederland.php">Nederland</a>
</div>

Проблема: Когда я нажимаю на кнопку меню (в примере: нажмите «Neerslag» или «Satteliet»), ничего не происходит.Я думаю, что селектор не правильный, но это должно быть.Ребята, вы можете мне помочь?

Answer 1

Я думаю, вы немного смущены. Похоже, что вы хотите использовать атрибут данных нажатой .categorie, чтобы сдвинуть переключатель соответствующего элемента. Итак, вы можете сделать:

$('.categorie[data-cat]').click(function(){
    $('div[id=box-"' + $(this).attr('data-cat') + '"]').slideToggle('slow');
});

или, если структура соответствует той, которую вы опубликовали, она может быть проще:

$('.categorie[data-cat]').click(function(){
    $(this).next(".box").slideToggle('slow');
});

Answer 2

Уже нашли проблему:

$(document).ready(function(){
    $('.categorie[data-cat]').click(function(){
        $('#cat-'+ $(this).attr('data-cat')).slideToggle('slow');
    });
});

В третьей строке $('#cat-' ... должно было быть $('#box-'