jQuery推出抽屉：单击works（有点），那么hover呢？

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

下面是实际的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>

一应俱全：

JavaScript中有一行注释，我认为这会改进单击功能，但出于某种原因，这会导致抽屉根本无法工作

如果有人对我如何改进这里的点击功能有任何想法，使其尽可能的用户友好，那就太好了

---

此外，客户端还需要悬停功能。如果有人对此有任何想法，那也太好了。

像这样的东西怎么样

$(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更改：不需要关闭或打开抽屉

要具有悬停功能，可能类似于：

---

h

您的点击解决方案太棒了，非常感谢。然而，悬停是一个问题。它可以很好地打开抽屉，但不允许与抽屉进行任何交互。移动鼠标在抽屉中单击会导致抽屉消失。然后您可以尝试混合使用这两个脚本。首先，不要使用悬停效果，而是绑定一个mouseenter事件（这样我们就可以在用户“离开”链接时消除这些操作）。然后用单击和我们在第一个脚本上使用的相同逻辑绑定另一个操作。就像在这里：

$(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');
        }
    });
});