1

我试图为 SharePoint 常见问题解答扩展手风琴，我几乎已经在工作，但不知道是否有更有效的方法来完成。如果这看起来很简单，请原谅我，我才刚刚开始使用 jQuery，并且还在为这个很棒的框架而绞尽脑汁。

文本淡入淡出OK。正在考虑滑入/滑出效果，但后者可以起作用。

我认为 CSS 存在问题，因为当文本淡入时行会向下跳。

另请注意，如果您将文本留在底部并不会淡出，并且当您使用鼠标输入时，它将淡出和淡入。使用我的代码，它是有道理的，但不确定更好的方法。

非常感谢所有帮助和/或建议。这个网站对我的开发工作很有帮助。

这是指向工作示例的代码链接的链接

HTML

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="accordion.js"></script>
        <link rel="stylesheet" type="text/css" href="StyleSheet.css">    
        <title>FADE</title>
    </head>
<body>
    <ul style="width:100%" class="accordion">
        <li class="accordion-item">
            <div class="accordion-header">Audit</div>
            <div  class="accordion-description">timelines, what &amp; who is involved</div>
            <div  class="accordion-content" style="display: none;">
                <div>Not sure what but it involves the world and the aliens....</div>
            </div>
        </li>
        <li class="accordion-item">
            <div  class="accordion-header">Archiving</div>
            <div  class="accordion-description">how to/when to/what to archive</div>
            <div  class="accordion-content" style="display: none;">
                <div>Archive everything, no such thing as to many backups</div>
            </div>
        </li>
        <li class="accordion-item">
            <div  class="accordion-header">Annual leave</div>
            <div  class="accordion-description">check how much annual leave you have and/or are entitled to, where to find forms</div>
            <div  class="accordion-content" style="display: none;">
                <div>Forms are awesome and in the intranet</div>
            </div>
        </li>
        <li class="accordion-item">
            <div  class="accordion-header">Accommodation</div>
            <div  class="accordion-description">how do I book accommodation</div>
            <div  class="accordion-content" style="display: none;">
                <div>wotif or sweet talk someone to do it for you</div>
             </div>
         </li>
    </ul>
</body>
</html>

CSS

body {
margin: auto;
width: 960px;
padding: 10px;
}

ul.accordion {
    list-style:none;
    margin:0px;
    padding:0px;
}
.accordion-item {
    border-top:1px solid #ccc;
}
.accordion-header {
    font-size:1.2em;
    font-weight:bold;
    cursor:pointer;
    padding-top:10px;
}
.accordion-description {
    bottom: 25px;
    font-style: italic;
    left: 300px;
    margin-bottom: -12px;
    position: relative;
    text-align: right;
    width: 600px;
}
.accordion-header:hover {
    background:#efefef;
}
.accordion-header.expanded {
    background:#dfdfdf;
}
.accordion-content {
    padding:20px;
}
.expand-all,
.collapse-all {
    display:inline-block;
    cursor:pointer;
    padding:5px 10px;
}
.expand-all:hover,
.collapse-all:hover {
    background:#efefef;
}

jQuery

function accordionLoad() {

    $(".accordion-header").removeClass("expanded");
    $(".accordion-content").hide();

    $(".accordion-header").bind("click", function(){
        $(this).toggleClass("expanded");
        $(this).siblings(".accordion-content").slideToggle();
    })

    $('.accordion-description').hide();
    $('.accordion-item').on('mouseenter', function ()
    {
        // $(this).next().siblings
        $('.accordion-description').fadeOut();
        $(this).find('.accordion-description').fadeIn();

    });

    $(".expand-all").bind("click",function(){
        $(this).siblings(".accordion").find(".accordion-content").slideDown();
        $(this).siblings(".accordion").find(".accordion-header").addClass("expanded");
    })

    $(".collapse-all").bind("click",function(){
        $(this).siblings(".accordion").find(".accordion-content").slideUp();
        $(this).siblings(".accordion").find(".accordion-header").removeClass("expanded");
    })
}

$(document).ready(function(){
    accordionLoad();
});
4

1 回答 1

0

您可以使用 css ( fiddle ) 来实现。因为它是一个简单的悬停，所以你并不需要 jQuery。您还可以为淡入效果添加额外的 CSS3 过渡。

在 item 元素上添加了悬停：

.accordion-item:hover .accordion-description {
    -transition: opacity .7s ease-in-out;
   -moz-transition: opacity .7s ease-in-out;
   -webkit-transition: opacity .7s ease-in-out;
    opacity: 1;
    visibility:visible; 
}

将描述放在标题元素之前，因为float: right

<div  class="accordion-description">timelines, what &amp; who is involved</div>
<div class="accordion-header">Audit</div>

更改了描述元素上的一些样式，并默认将其设置为不可见：

.accordion-description {
   -transition: opacity .7s ease-in-out;
   -moz-transition: opacity .7s ease-in-out;
   -webkit-transition: opacity .7s ease-in-out;
    opacity: 0; 
    visibility:hidden; 
    font-style: italic;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
}

移除了 item 元素的 mouseenter 事件：

function accordionLoad() {

    $(".accordion-header").removeClass("expanded");
    $(".accordion-content").hide();

    $(".accordion-header").bind("click", function(){
        $(this).toggleClass("expanded");
        $(this).siblings(".accordion-content").slideToggle();
    })

    $(".expand-all").bind("click",function(){
        $(this).siblings(".accordion").find(".accordion-content").slideDown();
        $(this).siblings(".accordion").find(".accordion-header").addClass("expanded");
    })

    $(".collapse-all").bind("click",function(){
        $(this).siblings(".accordion").find(".accordion-content").slideUp();
        $(this).siblings(".accordion").find(".accordion-header").removeClass("expanded");
    })
}
于 2013-05-04T23:16:01.727 回答