1

我正在寻找使用 jquery 作为一种切换按钮来在以下两种状态之间切换；

切换 A

切换 B

因此，当我单击切换按钮/链接时，图片 A 中的所有内容（红线上方）都被隐藏，当我再次单击切换按钮时，它会重新出现。

我一直在研究 Jquerys toggleClass 功能；

$("button").click(function(){
$("p").toggleClass("main");
});

但我相信这只会隐藏 CSS，而不是 HTML。我是在滥用这个功能还是不是为了这个？

谢谢

4

7 回答 7

3

这是一个工作示例：

http://jsfiddle.net/pV7Qe/

<div class="header">header</div>
<div class="menu">
    <div class="my-toggle">toggle</div>
</div>
<div class="content">
content            
</div>

.header
{
    background:lime;
}
.menu
{
    height:100px;
    background:gray;        
}
.my-toggle
{
    width:100px;
    background:red;
    cursor:pointer;
}
.content
{
    height:500px;            
    background:#ddd;
}​

$(".my-toggle").click(function() {
  $(".header").slideToggle();
});
于 2012-07-05T19:54:55.270 回答
2

如果您可以将红线上方的所有内容放入具有唯一 ID 的单个包含元素中，您可以简单地.toggle()在该单个元素上使用 jQuery 函数来实现您想要的。

于 2012-07-05T19:48:11.047 回答
1

考虑两个类

.hide{visibility: hidden;}
.show{visibility: visible;}

现在使用这个 JQuery 代码

$("button").click(function(){
$("p").toggleClass('hide','show');
});

这将解决您的问题。

于 2012-07-05T19:53:50.017 回答
0

尝试使用切换功能。

$("idOfButton").click(function(){
    $(".main").toggle();
});
于 2012-07-05T19:47:28.817 回答
0

使用不带任何参数的切换功能..

   $("button").click(function(){
$("p").toggleClass();
});

这应该有效。

于 2012-07-05T19:48:08.467 回答
0

您可以使用slideToggle(),toggle()或toggleClass('hidden')

.hidden {
    display: none;
}

参考：

于 2012-07-05T19:58:58.540 回答
0

没有理由使用 toggleClass 并为隐藏类提供额外的 css。

只需使用toggle或slideToggle即可获得更好的效果，这里的每个人都建议这样做。

我唯一添加的输入是，而不是

$('.buttons').click(function(){
    $('#div').slideToggle();
});

我相信使用'on'是更好的做法

$('.buttons').on('click', function(){
    $('#div').slideToggle();
});
于 2012-07-05T20:04:53.357 回答