1

SharePoint FAQ のアコーディオンを拡張しようとしましたが、ほとんど作業は完了しましたが、より効果的な方法で完了するかどうかはわかりません。これが非常に単純に思える場合は、ご容赦ください。私は jQuery を始めたばかりで、まだこの素晴らしいフレームワークについて頭を悩ませています。

テキストはフェードインおよびフェードアウトします。スライドイン/スライドアウト効果を考えていましたが、それは後者で機能するものです.

テキストがフェードインしたときに行がジャンプダウンすると思われる 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>

description 要素のいくつかのスタイルを変更し、デフォルトで非表示に設定しました。

.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 に答える