单击命名为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元素，那么所有的扩展器都会打开，但我只需要找到一个cliced并展开它。此外，如果我点击其他li元素，则打开的扩展器应该关闭。

JSFIDDLE

谢谢你的回答，很抱歉英语不好。

Answer 1

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

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

更新的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();
});