0

我正在创建一些 jQuery 推出抽屉 - 这是我的名称，用于在触发单击或悬停事件时展开的折叠 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>

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 中有一行注释，我认为这会改进点击功能，但由于某种原因，导致抽屉根本无法工作。

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

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

4

1 回答 1

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/

H

于 2013-11-06T03:45:16.707 回答