Question

我创建了一个简单的＆＃34;显示和隐藏＆＃34;使用Jquery切换，但我希望它特定于每个div，因为我将重用Class。

我知道我必须使用（this）函数，但似乎无法正确放置它。

非常感谢你的帮助。

    $(document).ready(function() {
    $('.showmenu').click(function() {
            $('.menu').toggle("toogle");
    });
});

Answer 1

我建议：

$(document).ready(function () {
    // attaching the click-event handler to the class:
    $('.showmenu').click(function () {
        // this is the DOM node of the clicked-element,
        // $(this) is the jQuery object formed from the clicked DOM node
        $(this)
          // traverses to the next sibling of the clicked element,
          // if it's a 'div' with the 'menu' class-name:
          .next('div.menu')
          // toggles that element:
          .toggle("toogle");
    });
});

$(document).ready(function () {
    $('.showmenu').click(function () {
        $(this).next('div.menu').toggle("toogle");
    });
});

<div class="showmenu">Click Here</div>
<div class="menu" style="display: none;">
    <ul>
        <li>Button1</li>
        <li>Button2</li>
        <li>Button3</li>
    </ul>
</div>
<div class="showmenu">Click Here</div>
<div class="menu" style="display: none;">
    <ul>
        <li>Button1</li>
        <li>Button2</li>
        <li>Button3</li>
    </ul>
</div>

参考文献：

next()。
toggle()。

推荐阅读：

jQuery tree-traversal methods。

Answer 2

使用next()。例如：

$(document).ready(function() {
    $('.showmenu').click(function() {
        $(this).next('.menu').toggle("toogle");
    });
});

Answer 3

你可以试试......

 $(document).ready(function() {
     $('.showmenu').click(function() {
         $(this).next().toggle("toggle");
    });
 });

Answer 4

$(document).ready(function () {
    $('.showmenu').click(function() {
        $(this).children().toggle();
    });
});

我假设你想要的是每个div在点击时切换其内容的可见性。 children选择器会将每个列表嵌套在div下，即使有多个列表也是如此。

我编辑了你的小提琴here。检查一下，你的html中也有一个错误（额外的</div>）。

如何使显示和隐藏切换特定

4 个答案: