Question

我的div内容是动态生成的。我正在尝试实现隐藏/显示设施。它有点工作，但我正在看“隐藏/只显示被点击的div。”

HTML

<div class="showmenu">First Div</div>
<div class="menu" style="display: none;">
    <ul>
        <li>Val1</li>
        <li>Val2</li>
        <li>val3</li>
    </ul>
</div>

<div class="showmenu">Second Div</div>
<div class="menu" style="display: none;">
    <ul>
        <li>val4</li>
        <li>val5</li>
        <li>val6</li>
    </ul>
</div>

的JavaScript

$(document).ready(function() {
    $('.showmenu').click(function() {
            $('.menu').slideToggle("fast");
    });
});

Fiddle

Answer 1

使用相对查找menu项目，而不是文档范围查找（$('.menu')）。

在您的情况下，showmenu和menu项目是下一个兄弟姐妹，因此您可以使用.next()

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="showmenu">First Div</div>
<div class="menu" style="display: none;">
  <ul>
    <li>Val1</li>
    <li>Val2</li>
    <li>val3</li>
  </ul>
</div>

<div class="showmenu">Second Div</div>
<div class="menu" style="display: none;">
  <ul>
    <li>val4</li>
    <li>val5</li>
    <li>val6</li>
  </ul>
</div>

Answer 2

您需要找到与单击的元素相关的.menu元素。为此，您可以使用this关键字和next()方法从引发事件的元素中进行遍历。试试这个：

$('.showmenu').click(function () {
    $(this).next('.menu').slideToggle("fast");
});

Example fiddle

Answer 3

使用this：

click事件处理程序中的

$(this)是单击的菜单。 next将提供与之关联的菜单。

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

演示：http://jsfiddle.net/tusharj/APA2S/4502/

Answer 4

在jquery中使用.next()，在$(this)中使用当前对象

$('.showmenu').click(function() {
    $(this).next('.menu').slideToggle("fast");
});

Fiddle

Answer 5

您正在寻找jQuery next()

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="showmenu">First Div</div>
<div class="menu" style="display: none;">
    <ul>
        <li>Val1</li>
        <li>Val2</li>
        <li>val3</li>
    </ul>
</div>

<div class="showmenu">Second Div</div>
<div class="menu" style="display: none;">
    <ul>
        <li>val4</li>
        <li>val5</li>
        <li>val6</li>
    </ul>
</div>

＆＃13;

无法在鼠标单击时隐藏/显示div

5 个答案: