有人可以解释为什么我的Adjacent Selector在jQuery中没有按预期工作吗？

Question

$(document).ready(function () {
    $("#collapsible").click(function () {
        $("h3 + *").toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 id="collapsible">Technical Specs:</h3> <!-- Needs to be clickable -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ul>

<h3 id="collapsible">Ordering Information</h3>
<p>To order please call us at 0-000-000-0000</p>

根据一些CSS教程我的理解 x + y 会选择 {之后的任何 y {1}} 即可。所以我认为 x 会选择在我的h3之后直接出现的Any（通配符）元素。但它没有像我预期的那样工作，为什么会这样？？

Answer 1

您有2个具有相同ID的元素。如果您点击订购信息，那么不，它将无法工作，因为它只找到第一个。

当选择器只是一个ID选择器时，jQuery只返回一个匹配的原因是因为它在这种情况下优化使用getElementById，而getElementById从不会找到多个元素。

如果您希望两个h3元素都可以点击，那么请将其ID设为CLASS，然后使用$(".collapsible")选择两者。元素可以共享一个类，类选择器将返回具有该类的所有元素。

但是，在您的事件处理程序中，您选择的所有h3 + *元素都可能不是您想要的。如果您只想选择下一个，请点击使用代表所点击元素的this，然后导航到下一个元素。

如果你想在这种情况下使用选择器，你可以这样做：

$("+ h3", this)

或者只使用jQuery的DOM选择方法之一。

Answer 2

固定代码：

HTML：

<h3 class="collapsible">Technical Specs:</h3> <!-- Needs to be clickable -->
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
    </ul>

    <h3 class="collapsible">Ordering Information</h3>       
    <p>To order please call us at 0-000-000-0000</p>

Jquery的：

$(".collapsible").click(function(){
    $(this).next("ul").toggle();
    $(this).next("p").toggle();
});

工作小提琴：http://jsfiddle.net/ejgk6r42/1/