通过名为 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
});

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

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

Expand menu item on click by data attribute which named as id

html

css

jquery

custom-data-attribute