单击名为 id 的数据属性展开菜单项

Question

如何通过名为 id 的数据属性在点击时展开菜单项？我的意思是，该数据属性是 id (data-cats="#movies")。

HTML

<li class="cat" data-cats="#movies">
    MOVIES
</li>


<li class="cat" data-cats="#music">
    MUSIC
</li>


etc...


<div class="expander" id="movies">
    menu items about movies
</div>

<div class="expander" id="music">
    menu items about music
</div>

etc...

jQuery

$('.cat').click(function() {
    $('.expander').show();
    // dont know what to do next
});

CSS

.expander { display:none; }

如果单击 li 元素，则所有扩展器都将打开，但我只需要找到已单击的一个并扩展它。此外，如果我点击其他 li 元素，则应该关闭打开的元素。

JSFIDDLE

感谢您的任何回答，抱歉英语不好。

Answer 1

您可以使用data() 获取要放置在选择器中的值。试试这个：

$('.cat').click(function() {
    $('.expander').hide(); // hide all shown divs
    $($(this).data('cats')).show(); // show the related one
});

Updated fiddle

Answer 2

从 ID <div class="expander" id="#movies"> 中删除 #。

<div class="expander" id="movies">
   menu items about movies
</div>

<div class="expander" id="music">
   menu items about music
</div>

---

$('.cat').click(function() {
        $('.expander'+$(this).data('cats')).show(); //or just $($(this).data('cats')).show();
});