Question

好的我的HTML标记如下：

<div class="refine_search_box"> 
    <div class="heading">Refine Search</div>   

    <div class="section_heading"><a href="#">By Size</a></div>
    <div class="section">
            @Html.DropDownListFor(m => m.Size, new SelectList(Model.SizeList, "key", "value", Model.Size), "")
    </div>

    <div class="section_heading"><a href="#">By Sport</a></div>
    <div class="section">
            @Html.DropDownListFor(m => m.Sport, new SelectList(Model.SportList, "key", "value", Model.Sport), "")
    </div>
</div>

我的Jquery如下：

$(document).ready(function () {
    $("div.section").toggle();

    $(".refine_search_box a").click(function (e) {
        var $this = $(this);
        var $div = $this.prev().nextAll(".section").first();
        $this.toggleClass("selected");
        $div.toggle();
        e.preventDefault();
    });
});

我想要发生的是当点击.section_heading中的链接时，我希望.section div在它之后直接打开它。但是我的jQuery总是不会为$ div返回任何内容，我认为这很简单，但我显然错过了一些明显的东西。我对jQuery很新，所以如果它的愚蠢简单就道歉！

干杯。

Answer 1

我认为您需要使用.parent（）而不是.prev（）：

$(".refine_search_box a").click(function (e) {
    var $this = $(this);
    var $div = $this.parent().next();
    $this.toggleClass("selected");
    $div.toggle();
    e.preventDefault();
});

这假设'.refine_search_box'包围了所有section_heading div。

只要你的html保持不变，你也可以使用.parent().next()。

Answer 2

使用next代替nextAll
prev返回前一个兄弟姐妹，你就是父母：

$(".refine_search_box a").click(function (e) {
    var $this = $(this);
    var $div = $this.parent().next(".section").first(); //< ====
    $this.toggleClass("selected");
    $div.toggle();
    e.preventDefault();
});

请注意，正如我评论的那样，我在标记中看不到refine_search_box类，也许它应该是：

    $(".section_heading a").click(function (e) {
        ...
    }

无法使用jQuery找到下一个元素

2 个答案: