Question

我想在+ 1添加div按钮，只有启用了JavaScript（否则它不应该在那里），并且当用户点击+按钮然后{{1} } 2将像手风琴一样打开/关闭。

如果div 2已打开，那么div图标应更改为+

默认情况下- 2应该关闭，如果JavaScript被禁用，则默认情况下应该打开，并且应隐藏div图标。

我想用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

这个答案显示了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 2

这会隐藏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 3

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';
    });
});

Answer 4

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

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

这就是你问的问题吗？

Answer 5

试试这个：

$(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： - 没有经过测试，但应该有效，尽管有许多优雅的方法和插件可以做到这一点。

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

5 个答案: