在点击并关闭按钮时在菜单中显示/隐藏内容

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

Eexcept它与投资组合的项目，而不是菜单项。我一直无法找到任何东西，我希望有人能带领我走向正确的方向。

2011-10-16 Marciom

请参阅['.click（）']（http://api.jquery.com/click/）。您正在查找的两个操作都将由点击事件处理。 –

简单的例子：

<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/

来源

2011-10-16 21:49:14

这有效，但我永远不会隐藏CSS的内容，如果JS被关闭或不加载？你永远不会看到它。如果您使用JavaScript显示内容，请先用JavaScript隐藏它。 – Karlgoldstraw

是的，你可以使用jQuery像这样：

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

});

或一个更好的使用效果，而不是slideDown()的show()！

声明你的菜单项和内容与ID，如：

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

记住ID是独一无二的！

下载jQuery和你的HTML的头，像这样将其链接：

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

祝你好运！

来源

2011-10-16 21:42:28 Anonymous

我只是做了“jQuery的组合过滤器”快速搜索，发现就如何实现这一功能/效果有些TUTS。

这tut实现你使用jquery和Quicksand plugin后。

来源

2011-11-10 00:56:42 Adrian

在点击并关闭按钮时在菜单中显示/隐藏内容

回答

相关问题