Question

我有一个SharePoint 2013环境。在我开始这项业务之前，有人创建了HTML和CSS脚本来创建一个手风琴效果，并排放着三张图片，链接在悬停时会扩展。

团队现在要求我删除手风琴效果，并将图像静态并排放置。没有真正的jQuery经验，我有点不知所措。

＆＃13;

ul.accordion{
    list-style:none;   
    position:absolute;
    top:0px;
    font-family: Cambria, serif;
    font-size: 16px;
    line-height: 1.5em;
}
ul.accordion li{
    float:right;
    width:120px;
    height:400px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
}
ul.accordion li.bg1{
    background-image:url(../images/1.jpg);
}
ul.accordion li.bg2{
    background-image:url("../images/People400.jpg");
}
ul.accordion li.bg3{
    background-image:url("../images/Performance400.jpg");
}
ul.accordion li.bg4{
    background-image:url("../images/Potential400.jpg");
}
ul.accordion li.bleft{
    border-left:2px solid #fff;
}
ul.accordion li .heading{
    background-color:#fff;
    padding:10px;
    margin-top:60px;
    opacity:1;
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:14px;
    color:#1F497D;
    text-align:center;
    text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description{
    position:absolute;
    width:400px;
    height:200px;
    bottom:0px;
    left:0px;
    display:none;
}
ul.accordion li .description h2{
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:45px;
    color:#1F497D;
    text-align:left;
    margin:2px 0px 15px 20px;
    text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description p{
    line-height:14px;
    margin:10px 22px;
    font-family: arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.5em;
    color: #1F497D;
}
ul.accordion li .description a{
    padding: 5px;
    bottom:5px;
    left:20px;
    font-style:normal;
    font-size:12px;
    text-transform:uppercase;
    text-decoration:none;
    color:#F79646;
}
ul.accordion li .description a:hover{
    color:#333;
    text-decoration:underline;
}

ul.accordion li .bgDescription{
    background:transparent url(../images/bgDescription.png) repeat-x top left;
    height:300px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    display:none;
}

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
    <head>
        <title>HR - People. Performance. Potential.</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Human Resource site" />
        <meta name="keywords" content="Human Resource,"/>
        <link rel="stylesheet" href="css/style2.css" type="text/css" media="screen"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            body{
                font-family:Arial;
                background:#fff repeat top left;
            }
            a{
                color:#444;
            }
            a:hover{
                color:#999;	
            }
            .title{
                width:700px;
                height:400px;
                position:absolute;
                top:0px;
                left:0px;
            }
            a.back{
                background:transparent url(back.png) no-repeat top left;
                position:fixed;
                width:150px;
                height:27px;
                outline:none;
                bottom:0px;
                left:0px;
            }
            #content{
                margin:0 auto;
            }
            .reference{
                clear:both;
                top:300px;
                left:0px;
                position:absolute;
                text-align:right;
                width:400px;
                padding:20px;
                background-color:#fff;
                -moz-box-shadow:1px 3px 15px #ddd;
                -webkit-box-shadow:1px 3px 15px #ddd;
                box-shadow:1px 3px 15px #ddd;
            }
            .reference p a{
                text-transform:uppercase;
                text-shadow:1px 1px 1px #fff;
                color:#666;
                text-decoration:none;
                font-size:10px;
            }
            .reference p a:hover{
                color:#333;
            }

        </style>
    
	
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:_dlc_DocId msdt:dt="string">F5RN5Q3VV7Q3-34-60</mso:_dlc_DocId>
<mso:_dlc_DocIdItemGuid msdt:dt="string">14938db6-45be-4314-bef6-093a88df00d7</mso:_dlc_DocIdItemGuid>
<mso:_dlc_DocIdUrl msdt:dt="string">http://intranet/sites/hr/_layouts/DocIdRedir.aspx?ID=F5RN5Q3VV7Q3-34-60, F5RN5Q3VV7Q3-34-60</mso:_dlc_DocIdUrl>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>

    <body>
        <div id="content">
            <div class="title"></div>
            
            <ul class="accordion" id="accordion">
                <li class="bg4">
                    <div class="heading">Potential</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2>Potential</h2>
                        <p>
							<a href="http://intranet/sites/hr/Pages/Development.aspx" target="_blank">Development</a><br/>
						</p>
                    </div>
                </li>
                
                <li class="bg3">
                    <div class="heading">Performance</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2>Performance</h2>
                        <p>
							<a href="http://intranet/sites/hr/Pages/Framework.aspx" target="_blank">Framework</a><br/>
						</p>
                    </div>

                </li>
                <li class="bg2" id="People">
                    <div class="heading">People</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2>People</h2>
							<p>
								<a href="http://intranet/sites/hr/Pages/Service.aspx" target="_blank">Service</a><br/>
							</p>
						
                    </div>

                </li>
            </ul>
        </div>

    </body>
</html>

＆＃13;

{{1}}

＆＃13;

我想知道如何移除手风琴功能并让它们静静地坐在一起？很高兴在您需要时提供额外的HTML和CSS。

Answer 1

您应该可以通过注释或删除该功能来删除它。

   $(function() {
       /*
            $('#accordion > li').hover(
            function () {
                    var $this = $(this);
                    $this.stop().animate({'width':'400px'},400);
                    $('.heading',$this).stop(true,true).fadeOut();
                    $('.bgDescription',$this).stop(true,true).slideDown(400);
                    $('.description',$this).stop(true,true).fadeIn();
                },
                function () {
                    var $this = $(this);
                    $this.stop().animate({'width':'165px'},1000);
                    $('.heading',$this).stop(true,true).fadeIn();
                    $('.description',$this).stop(true,true).fadeOut(400);
                    $('.bgDescription',$this).stop(true,true).slideUp(600);
                }
            );
       */
   });

/ * * /之间的所有内容都已注释掉，并且不再有效。如果他们改变主意，可能最好将其评论出来。

此外，在您的HTML中，您可能会发现＆＃39; display：none＆＃39;在您的链接容器上。如果您希望链接可见，请将其删除。

如果需要更多视觉更正，则需要发布css。

尝试使用小提琴播放您的CSS编辑： https://jsfiddle.net/gjs6La6d/

jQuery - 从HTML中删除accordion

1 个答案: