Question

我尝试在 li 中切换 div ，但它不适用于我

$('#open_p_table').on('click', function() {
    $(this).closest('li').find('.players').toggle();
});

这是FIDDLE

我做错了什么？

Answer 1

两个span元素都共享此ID：open_p_table。

IDs must be unique。改为使用类：

$('.open_p_table').on('click', function () {
    $(this).closest('li').find('.players').toggle();
});

<ul>
    <li class="item">   <span class="open_p_table">Players</span>
        <div class="players">description</div>
    </li>
    <li class="item">   <span class="open_p_table">Players</span>
        <div class="players">description</div>
    </li>
</ul>

JSFIDDLE

Answer 2

我应该是唯一的..！将open_p_table更改为类，然后执行，

$('.open_p_table').on('click', function () {
    $(this).closest('li').find('.players').toggle();
});

.open_p_table{ cursor:pointer; }
.open_p_table + .players {  display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<ul>
  <li class="item"><span class="open_p_table">Players</span>
    <div class="players">description</div>
  </li>
  <li class="item"><span class="open_p_table">Players</span>
    <div class="players">description</div>
  </li>
</ul>

Answer 3

取代重复的ID open_p_table ，而不是如图所示：

HTML：

<ul>
    <li class="item">

            <span class="open_p_table">Players</span>
            <div class="players">
                description
            </div>
        </li>

    <li class="item">

            <span class="open_p_table">Players</span>
            <div class="players">
                description
            </div>
        </li>
</ul>

Jquery的：

$('.open_p_table').on('click', function() {
    $(this).closest('li').find('.players').toggle();
});

Working Demo

Answer 4

首先ID必须是唯一的，因此请将其更改为类：

$('.open_p_table').on('click', function() {
        $(this).closest('li').find('.players').toggle();
    });

你的HTML：

<li class="item">
            <span class="open_p_table">Players</span>
            <div class="players">
                description
            </div>
        </li>

DEMO

Answer 5

http://jsfiddle.net/oexf0624/1/

您正在重新使用id（必须是唯一的） - 我将其更改为class，现在它可以正常运行：）

$('.open_p_table').on('click', function() {
    $(this).closest('li').find('.players').toggle();
});

<span class="open_p_table">Players</span>
<div class="players">
    description
</div>

Answer 6

您正在使用ID进行选择。但是，如果DOM中有多个相同的ID，则只选择具有该ID的第一个元素。您将需要使用该课程。

$('.open_p_table').on('click', function() {
    $(this).closest('li').find('.players').toggle();
});

并且您的HTML将是

<ul>
    <li class="item">

            <span class="open_p_table">Players</span>
            <div class="players">
                description
            </div>
        </li>

    <li class="item">

            <span class="open_p_table">Players</span>
            <div class="players">
                description
            </div>
        </li>
</ul>

Answer 7

使用类选择器

$('.open_p_table').on('click', function() {
        $(this).closest('li').find('.players').toggle();
    });

ID通常被认为是唯一的

在父li中定位最接近的元素

7 个答案: