1

我试图让一些 div 在鼠标悬停时可见，但我期望应该工作的代码不起作用。也许我错误地使用了 next() ？我在其他地方成功地使用了相同类型的东西，所以我有点不确定问题是什么。

小提琴。

代码：

$(".clause").mouseenter(function() {

    /* NOT WORKING */
    $(this).next("div.drawer-arrow").css("display","block");
    $(this).next("div.drawerBottom").css("display","block");

    $(".clause").css("border-bottom-right-radius", "0px");
    $(".clause").css("border-bottom-left-radius", "0px");

}).mouseleave(function(){

    /* NOT WORKING */
    $(this).next("div.drawer-arrow").css("display","none");
    $(this).next("div.drawerBottom").css("display","none");

    $(".clause").css("border-bottom-right-radius", "3px");
    $(".clause").css("border-bottom-left-radius", "3px"); 

});

$(".clause").click(function() {
    $(".clause").css("box-shadow", "none");

    /* WORKING */
    var tmp = $(this).next("div.drawer");
    if(tmp.is(":hidden")) {
        tmp.slideDown('2s');
        $(this).css("box-shadow", "0px 3px 5px #AAA");
    }
    else {
        tmp.slideUp('2s');
    }
});
4

4 回答 4

1

使用 nextAll() 代替 next()。Next() 只需检查下一个元素，在您的情况下，该元素不属于您的目标类别。

于 2012-10-22T15:09:27.333 回答
1

使用以下内容：

$(this).next().next('.drawer-arrow').css("display","block");
$(this).next().next().next('.drawerBottom').css("display","block");

extra.next()将选择<div class="drawer">元素，下一次将 get drawer-arrow，然后再次 getdrawerBottom

编辑：

.next()与更改标记以对查询部分进行分组相比，多次删除元素可能不太理想。您可能会考虑重新构建标记，以便可以使用更简单的选择器：

<div class="queryGroup">
    <div class="clause">...</div>
    <div class="drawer">...</div>
    <div class="drawer-arrow"></div>
    <div class="drawerBottom"></div>
</div>

该.clause mouseenter事件可能是这样的：

var $this = $(this); // cache this as a jQuery object

$this.nextAll('.drawer-arrow').show();
$this.nextAll('.drawerBottom').show();

...
于 2012-10-22T15:14:33.510 回答
1

您可以使用 next all 并结合两个选择器 - .next() 仅查看直接位于当前元素之后的元素。.nextAll 将查找匹配选择器的当前元素之后的所有兄弟。

$(".clause").mouseenter(function() {    
    $(this).nextAll("div.drawer-arrow:first,div.drawerBottom:first").show();    
    $(".clause").css("border-bottom-right-radius", "0px")
                .css("border-bottom-left-radius", "0px");

}).mouseleave(function(){
    $(this).nextAll("div.drawer-arrow:first,div.drawerBottom:first").hide();    
    $(".clause").css("border-bottom-right-radius", "3px")
                .css("border-bottom-left-radius", "3px");     
});

http://jsfiddle.net/wirey00/5dBsq/

于 2012-10-22T15:19:18.423 回答
1

尝试使用.nextAll()

$(this).nextAll('.drawer-arrow').first().css("display","block");

.next()只会选择与选择器匹配的元素。（否则它将返回一个空选择器）..

您可以将它与.first()它结合起来，它将获得第一个元素而不是该类的所有元素

在这种情况下，最好.nextAll()在您不知道当前元素和下一个元素之间的兄弟数量时使用。

于 2012-10-22T15:19:48.390 回答