使用 jquery 点击 Div1 ， Div2 应该是打开/关闭

Question

我想添加一个+ 按钮到div 1 只有在启用JavaScript 时（否则它不应该存在）并且当用户点击+ 按钮时div 2 将像打开/关闭一样手风琴。

如果div 2打开了，那么+图标应该变成-

默认div 2 应该被关闭，如果JavaScript 将被禁用，那么它应该默认打开并且+/- 图标应该被隐藏。

我想用 jquery 来做这个。

alt text http://shup.com/Shup/374246/1106191530-My-Desktop.png

编辑：

这段代码对我很有用，

How to make jQuery slidetoggle effect for multiple div on same page?

我只想添加 +/- 图标也使用 JavaScript，如果 JavaScript 将被禁用，那么它应该默认打开，+/- 图标应该被隐藏。

我将使用+ 和- 的图片而不是文字。

Answer 1

使用 jQuery 为您创建一个手风琴控件，并且只有 div 作为基本 html。

所以基本上你已经加载了 accoridon 插件，如果启用了 javascript，那么手风琴就会工作，否则你会看到一组 div，这样用户仍然可以在面板中看到数据。

这是你要问的吗？

Answer 2

此答案显示 div2 并在没有 JS 时隐藏加号。

使用 plus span 上的背景图像代替 img 标签，因为它在语义上不是图像，而是以图像形式表示的按钮。

CSS：

.plusClass 
{ 
    display: none; 
    width:IMGWIDTH; 
    height: IMGHEIGHT; 
    float:right; 
    display: block;
    margin-right: 15px;
}
    .contracted .plusClass { background-image: url('plus.png'); }
    .expanded .plusClass { background-image: url('minus.png'); }

.div2class { display: block; }

HTML：

<div class="div1">Title<span class="plusClass"></span></div>
<div class="div2">Content</div2>

JS：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.plusClass').show();
    $('.div2class').hide();
    $('.plusClass').addClass('plusContracted');
    $('.plusClass').click(function() {
        $(this).parent().next().toggle;
        /* Thanks to Chadwick for toggleClass */
        $(this).parent().toggleClass('expanded').toggleClass('contracted'); 
    });
});
</script>

Answer 3

试试这个：

$(function(){
     $("#div2").hide();
     $("#div1 #divIcon").text("+");

     $("#div1").click(function(){
        var t=$("#div1 #divIcon").text();
        if(t=='+'){
            $("#div1 #divIcon").text("-");
            $("#div2").show();
        }else{
            $("#div1 #divIcon").text("+");
            $("#div2").hide();
        }
     });
});

PS：- 未经测试，但应该可以工作，尽管有许多优雅的方法和插件可以做到这一点。

Answer 4

这隐藏了 div2 并在 ready 函数中添加了切换按钮，这显然只有在 js 存在时才会发生。

点击绑定到滑动切换div2和改变按钮的功能。

风格各异。

<script type="text/javascript">
    $(document).ready(function(){
        $('#div2').hide();
        $('#div1').append('<span id="btn">+</span>');
        $('#btn').click(function(){
            $('#div2').slideToggle(600);
            $(this).text($(this).text() == '+' ? '-' : '+');
        });
    });

</script>

<div id='div1'><h2>div 1</h2></div>
<div id='div2'><h2>div 2</h2>Lorem ipsum dolor sit amet</div>

更新：如果按钮应该是图像，我建议使用背景图像切换 div 的类。相同的想法。

<style>
#btn {float: right;width:16px; height:16px; }
.plus { background-image:url('plus-icon.gif');}
.minus { background-image:url('minus_icon.gif');}
</style>


$('#div2').hide();
$('#div1').prepend('<div id="btn" class="plus"></div>');
$('#btn').click(function(){
    $(this).toggleClass('plus').toggleClass('minus');
    $('#div2').slideToggle(600);
});

Answer 5

demo

fixed demo based on comments

css

.toggle img {
    display:none;
}​

html

<div class="toggle">Show Panel <img src="http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png"></div>
<div class="hidden">
Blah Blah Blah
</div>​

jQuery

$(".hidden").hide();
$('.toggle img').show();
$(".toggle").click(function(){
    $(".hidden").slideToggle("slow");
        $(this).html(function(i,html) {
            if (html.indexOf('Show') != -1 ){
               html = html.replace('Show','Hide');
            } else {
               html = html.replace('Hide','Show');
            }
            return html;
        }).find('img').attr('src',function(i,src){
        return (src.indexOf('plus.png') != -1)? 'http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png' :'http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png';
    });
});