Question

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

如何对其进行编辑，以便默认情况下行折叠而不是展开？

我只想让一切都开始崩溃，而不是扩大。代码应该改变什么？

（回到网络开发...真的很新。）

以下是小提琴代码的副本，以防链接无效。

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

Answer 1

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

.description{
    display:none;
}

您还可以将点击handeler逻辑简化为：

    $(".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);
        }
    });

以下是完整的工作代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

$（ “描述”。）隐藏（）;

文档加载后直接意味着没有启用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>

需要帮助调整小提琴代码以使用Javascript和CSS折叠/扩展Div

2 个答案: