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

回答

相关问题