Question

按下按钮时，我只是尝试toggle() <div class="reveal">。

我会在页面上显示多个按钮和相应的<div>，因此我只想使用toggle()

$(this).next("div.reveal").toggle();页面上的下一个实例

什么都没发生，没有错误。我做错了什么？

HTML：

<article class="customerQuotes">
    <blockquote>Blah
        <cite><b>Name</b> - Company</cite>
    </blockquote>
    <button class="button right">More</button>

</article>

<div class="reveal">
    <div class="right">
        //stuff here
    </div>
</div>

JS：

$(".button").click(function() {
    $(this).next("div.reveal").toggle();
});

CSS：

 .reveal{
    display: none;
    float: left;
    clear: both;
 }

Answer 1

你需要在父元素上调用.next，因为.reveal是它的兄弟。

$(".button").click(function() {
    $(this).parent().next("div.reveal").toggle();
});

Answer 2

那是因为$(this).next("div.reveal")是undefined。按钮元素旁边没有div.reveal。

你需要像这样重构你的html：

<article class="customerQuotes">
    <blockquote>Blah
        <cite><b>Name</b> - Company</cite>
    </blockquote>
    <button class="button right">More</button>

    <!-- Note here that div.reveal is sibling to a button so 
         .next() will find this element -->
    <div class="reveal">
       <div class="right">
        //stuff here
       </div>
    </div>
</article>

或更改您的JQuery选择器，以便从父元素中抓取下一个显示内容，如下所示：

$(".button").click(function() {
    $(this).parent().next("div.reveal").toggle();
});

Answer 3

像其他人一样说你忘了在parent（）上使用next（）方法。

但是，每当您更改HTML的结构时，此代码都会中断！更好地参考要明确揭示的要素。一种简单的方法是将目标保存为按钮上的数据：

<button data-target="#reveal1" class="button right">More</button>
...
<div id="reveal1"></div>

你的JS看起来像这样：

$(".button").click(function() {
    $( $(this).data("target") ).toggle();
});

无论您将按钮和div放在何处，都可以使用。

按钮单击显示div

3 个答案: