Question

我正在创建一些jQuery推出抽屉 - 这是我的折叠div的名称，当触发点击或悬停事件时它会扩展。这实际上是更大的菜单系统的一部分。无论如何，有两个元素，当你点击一个元素时，抽屉会打开，里面有一些内容。我现在设置了如果你点击一次打开，然后第二次点击关闭。但是，由于还有另一个链接在它旁边做了基本相同的事情，我希望抽屉在它们之间切换时保持打开状态。目前，如果您单击第一个链接打开，我只能使其工作一次，然后单击第二个链接切换内容，然后再次单击任一链接，抽屉关闭。这可能没有多大意义，所以看看一些代码。

这是实际的JavaScript：

$(function () {
    $('a.drawercontrol').click(function (e) {
        e.preventDefault();
        var dindex = $(this).data("index");
        $('.drawer').removeClass('active');
        $("div[data-target='" + dindex + "']").addClass('active');
        if ($('#drawerarea').hasClass('closed')) {
            $('#drawerarea').toggleClass('closed');
            //$("div[data-target='" + dindex + "']").addClass('pop');
        }
        if ($("div[data-target='" + dindex + "']").hasClass('pop')) {
            $('#drawerarea').toggleClass('closed');
            $('.drawer').removeClass('pop');
        } else {
            $("div[data-target='" + dindex + "']").addClass('pop');
        }
    });
});

这是基本的HTML框架：

<div id="topbox">
    <a href="#" class="drawercontrol" data-index="1">Drawer One</a>
     <a href="#" class="drawercontrol" data-index="2">Drawer Two</a>
</div>
<div id="drawerarea" class="closed">
    <div class="drawer active" data-target="1">Drawer One is Active</div>
    <div class="drawer" data-target="2">Drawer Two is Active</div>
</div>
<div id="bottombox"></div>

CSS：

#topbox {
    width: 500px;
    height: 100px;
    background-color: aqua;
}
#topbox a {
    margin: 10px;
}
#drawerarea {
    width: 500px;
    height: 150px;
    background-color: orange;
    overflow: hidden;
}
#drawerarea.closed {
    height: 0px;
}
.drawer {
    display: none;
}
.drawer.active {
    display: block;
}
#bottombox {
    width: 500px;
    height: 200px;
    background-color: red;
}

一体化：http://jsfiddle.net/HbA8f/2/

JavaScript中有一条注释行，我认为这会改善点击功能，但由于某种原因，这会导致抽屉根本不起作用。

如果有人对如何改善点击功能有任何想法，为了使其尽可能方便用户使用，那就太棒了。

此外，客户也希望悬停功能。如果有人对此有任何想法，那也会很棒。

Answer 1

这样的事情怎么样？

$(function () {
    $('a.drawercontrol').click(function (e) {

        e.preventDefault();

        var index = jQuery(this).index(),
            targetDrawer = jQuery('.drawer').eq(index);

        if (targetDrawer.hasClass('active')) {
            targetDrawer.hide().removeClass('active');
        } else {
           targetDrawer.show().addClass('active').siblings().hide().removeClass('active');
        }
    });
});

每次单击链接时，都会检查相关的抽屉（使用索引而不是数据）是否打开。如果它打开，你关闭它。如果没有，你打开它并关闭他所有的兄弟姐妹。

还有一个CSS更改：无需关闭或打开父级抽屉。

http://jsfiddle.net/HbA8f/4/

要有悬停功能，可能是这样的：

http://jsfiddle.net/HbA8f/5/

ħ

jQuery推出抽屉：点击作品（有点），如何悬停？

1 个答案: