改進jquery手風琴並刪除bug

我試圖在手風琴上擴展SharePoint常見問題解答，我幾乎可以工作，但不會去看看是否有更有效的方法來完成。請原諒，如果這看起來很簡單，我只是剛剛開始jQuery，並仍然在這個真棒框架敲打我的頭。改進jquery手風琴並刪除bug

文本淡入和淡出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(); 
});

來源

2013-05-03 MrWilde

您應該發佈您的代碼。 – pmandell 2013-05-03 02:05:04

嘗試使用CSS來做到這一點 – 2013-05-03 04:17:36

你可以用css來實現（fiddle）。因爲這是一個簡單的懸停，你並不需要jQuery。您還可以添加額外的CSS3轉換以實現淡入效果。

添加的項目元素上懸停：

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

刪除了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-04 23:16:01

非常感謝您的協助。真的很感激它 – MrWilde 2013-06-20 08:17:08

改進jquery手風琴並刪除bug

回答

相關問題