Question

我正在寻找一个插件，最好是jQuery，我可以隐藏内容，然后当你点击其中一个菜单项时，它会显示内容。但是，在用户单击关闭按钮之前，内容不会隐藏。这个主题使用了这个效果：

除了它与投资组合项目而不是菜单项目。我找不到任何东西，我希望有人能带领我朝着正确的方向前进。

Answer 1

简单示例：

<div id="menu">
    <a href="first.html" rel="first">First</a>
    <a href="last.html" rel="last">Last</a>
</div>
<div id="first" class="content">
    First
    <input class="close" type="button" value="X"/>
</div>
<div id="last" class="content">
    Last
    <input class="close" type="button" value="X"/>
</div>

.content {
  display: none;
}

$(document).ready(function(){
    $('#menu a').click(function(){
        $('.content').hide();
        $('#'+this.rel+'').show();
        return false;
    });
    $('.content input.close').click(function(){
        $(this).parent().hide();
    });
});

http://jsfiddle.net/wm5Bh/

Answer 2

是的你可以像这样使用jquery：

$(document).ready(function(){
    $('#menuitem').click(function(){
              $('#content').show();
    })

 });

或使用slideDown()代替show()以获得更好的效果！

使用以下标识声明您的menuitem和您的内容：

<a href="x.php" id="menuitem">Menu</a>
<div id="content">Show me</div>

请记住，id是唯一的！

下载jquery并将其链接到您的html-header中，如下所示：

<script type="text/javascript" src="js/jquery.js"></script>

祝你好运！

Answer 3

我刚刚对“jquery组合过滤器”进行了快速搜索，并发现了如何实现此功能/效果的一些内容。

此tut实现了使用jquery和Quicksand plugin之后的目标。

在单击和关闭按钮上显示/隐藏菜单中的内容

3 个答案: