需要帮助调整 Fiddle 代码以使用 Javascript 和 CSS 折叠/展开 Div

Need help tweaking Fiddle code to Collapse/Expand Divs using Javascript and CSS

本文关键字：CSS Javascript 折叠 Div 展开 帮助 调整 Fiddle 代码      更新时间：2023-09-26

这是小提琴：http://jsfiddle.net/yrshaikh/gqtxP/

如何编辑它以使行默认折叠而不是展开？

我只是希望一切都开始折叠，而不是扩展。代码中应该更改什么？

（刚刚回到Web开发......真的很新。

下面是来自fiddle的代码副本，以防链接不起作用。

.HTML：

<div>
    <span id="expandAll" class="links">Expand All</span>
    <span id="collapseAll" class="links">Collapse All</span>    
</div>
<div id="header1" class="header">
    <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_minus.png" />
    <span>Sachin Tendulkar</span>
</div>
<div id="description1" class="description">
    Sachin Ramesh Tendulkar is an Indian cricketer widely acknowledged as one of the greatest batsmen in One Day International[2] and second only to Don Bradman in the all time greatest list in Test cricket
</div>
<div id="header2" class="header">
    <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_minus.png" />
    <span>Rahul Dravid</span>
</div>
<div id="description2" class="description">
    Rahul Dravid is a former Indian cricketer, who captained the national Test and One Day International (ODI) teams. Born in a Marathi family, he started playing cricket at the age of 12 and later represented the state team at the under-15, under-17 and under-19 levels.
</div>

.CSS：

body{font-family:Arial;}
.header img{position:relative; top:10px;}
.header { font-weight:bold; padding-bottom:10px;cursor:pointer;}
.links {color:#3366CC;cursor:pointer;}
.links:hover {border-bottom:1px solid #3366CC;}

Javascript：

var mImg = "http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_minus.png";
var pImg = "http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_plus.png";
$(document).ready(function(){
    $("#expandAll").click(function(){
        $(".description").slideDown();
        $(".header img").attr("src", mImg)
    });
    $("#collapseAll").click(function(){
        $(".description").slideUp();
        $(".header img").attr("src", pImg)
    });
    $("#header1").click(function(){
        var currentState = $("#description1").css("display");
        if(currentState = "block"){
            $("#description1").slideUp();
            $("#header1 img").attr("src", pImg)
        }
        else{
            $("#description1").slideDown();
            $("#header1 img").attr("src", mImg)
        }
    });
    $("#header2").click(function(){
        var currentState = $("#description2").css("display");
        if(currentState = "block"){
            $("#description2").slideUp();
            $("#header2 img").attr("src", pImg)
        }
        else{
            $("#description2").slideDown();
            $("#header2 img").attr("src", mImg)
        }
    });
});

我会在你的 CSS 中设置以下内容

.description{
    display:none;
}

您还可以将点击处理程序逻辑简化为：

    $(".header").click(function(){
        var elm= $(this).nextAll('.description').first()
        if($(elm).is(':visible')){
           $(elm).slideUp(); 
           $(this).find('.myImg').attr("src", pImg);
        }
        else{
           $(elm).slideDown(); 
           $(this).find('.myImg').attr("src", mImg);
        }
    });

以下是完整的工作代码：

var mImg = "http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_minus.png";
var pImg = "http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_plus.png";
$(document).ready(function(){
    
    $("#expandAll").click(function(){
        $(".description").slideDown();
        $(".header img").attr("src", mImg)
    });
    
    $("#collapseAll").click(function(){
        $(".description").slideUp();
        $(".header img").attr("src", pImg)
    });
        
    $(".header").click(function(){
        var elm= $(this).nextAll('.description').first()
        if($(elm).is(':visible')){
           $(elm).slideUp(); 
           $(this).find('.myImg').attr("src", pImg);
        }
        else{
           $(elm).slideDown(); 
           $(this).find('.myImg').attr("src", mImg);
        }
    });
});
body{font-family:Arial;}
.header img{position:relative; top:10px;}
.header { font-weight:bold; padding-bottom:10px;cursor:pointer;}
.links {color:#3366CC;cursor:pointer;}
.links:hover {border-bottom:1px solid #3366CC;}
.description{
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <span id="expandAll" class="links">Expand All</span>
    <span id="collapseAll" class="links">Collapse All</span>    
</div>
<div id="header1" class="header">
    <img  class="myImg" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_plus.png" />
    <span>Sachin Tendulkar</span>
</div>
<div id="description1" class="description">
    Sachin Ramesh Tendulkar is an Indian cricketer widely acknowledged as one of the greatest batsmen in One Day International[2] and second only to Don Bradman in the all time greatest list in Test cricket
</div>
<div id="header2" class="header">
    <img class="myImg" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_plus.png" />
    <span>Rahul Dravid</span>
</div>
<div id="description2" class="description">
    Rahul Dravid is a former Indian cricketer, who captained the national Test and One Day International (ODI) teams. Born in a Marathi family, he started playing cricket at the age of 12 and later represented the state team at the under-15, under-17 and under-19 levels.
</div>

$（".description"）.hide（）;

加载

文档后立即意味着任何未启用Javascript的人都不会在页面加载时隐藏描述（渐进式增强）

您还可以在 expandCollapse 函数中添加 slideToggle（），以在向上滑动和向下滑动两种状态之间交替。

最后，您可以在两个类的帮助下在两个图像之间切换，一个用于加号图像，一个用于减号图像，然后您可以使用 toggleClass（） 和 addClass（） 和 removeClass（） 在它们之间交替

$(document).ready(function(){
        $(".description").hide();
        
        $("#expandAll").click(function(){
            $(".description").slideDown();
            $(".header").removeClass("pImg").addClass("mImg");
        });
        
        $("#collapseAll").click(function(){
            $(".description").slideUp();
            $(".header").removeClass("mImg").addClass("pImg");
        });
        
        $("#header1, #header2").click(function(){
            $(this).toggleClass("mImg").next().slideToggle();
        });
});
body{font-family:Arial;}
.header img{position:relative; top:10px;}
.header { font-weight:bold; padding-bottom:10px;cursor:pointer;}
.links {color:#3366CC;cursor:pointer;}
.links:hover {border-bottom:1px solid #3366CC;}
.header { padding-left: 36px; line-height: 32px; margin-top: 5px;}
.pImg { background: url("http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_plus.png") no-repeat;}
.mImg { background: url("http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_minus.png") no-repeat;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <span id="expandAll" class="links">Expand All</span>
    <span id="collapseAll" class="links">Collapse All</span>    
</div>
<div id="header1" class="header pImg">
    <span>Sachin Tendulkar</span>
</div>
<div id="description1" class="description">
    Sachin Ramesh Tendulkar is an Indian cricketer widely acknowledged as one of the greatest batsmen in One Day International[2] and second only to Don Bradman in the all time greatest list in Test cricket
</div>
<div id="header2" class="header pImg">
    <span>Rahul Dravid</span>
</div>
<div id="description2" class="description">
    Rahul Dravid is a former Indian cricketer, who captained the national Test and One Day International (ODI) teams. Born in a Marathi family, he started playing cricket at the age of 12 and later represented the state team at the under-15, under-17 and under-19 levels.
</div>

相关文章：