Jquery手风琴和褪色答案

【问题标题】：Jquery Accordion and FadingJquery手风琴和褪色
【发布时间】：2010-05-13 04:29:33
【问题描述】：

我正在尝试创建一个 jquery 手风琴，它在页面加载时淡出手风琴的标题，然后在鼠标悬停时淡入。当鼠标悬停时，手风琴也会打开。我能够让所有这些工作，我遇到的问题是当手风琴打开时，标题移开并且鼠标不再在它上面以保持点亮。我希望链接保持标题亮起，以及鼠标是否位于标题本身上。下面是我为它写的代码。

<html>
<head
<script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-1.4.2.min.js'></script>

<script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-custom-181/jquery-ui-1.8.1.custom.min.js'></script>
</head>

<body bgcolor="black">

<style = "css/text">

.links {
        font-family: "Georgia", "Verdana", serif;
 line-height: 30px;
        margin-left: 20px;
 margin-top: 5px;
       }

.Title {
        font-family: "Geneva", "Verdana", serif;
 font-weight: bold;
 font-size: 2em;
 text-align: left;
 font-variant: small-caps;
 border-bottom: solid 2px #25FF00;
 padding-bottom:5px;
 margin-bottom: 10px;
}

</style>

<script type="text/javascript">
$(document).ready(function(){
   $(".Title").fadeTo(1,0.25);
$(".Title").hover(function () {
   $(this).stop().fadeTo(250,1)
   .closest(".Title").find(".links").fadeTo(250,0.75);
}, 
function() {
$(this).stop().fadeTo(250,0.25);
});
});

$(function() {
 $("#accordion").accordion({
  event: "mouseover"
});
});

</script>
<p>&nbsp</p>
<div id="accordion">

<div class="Title"><a href="#"STYLE="TEXT-DECORATION: NONE; color: #25FF00;">Reference</a></div>
<div class="links">
<a href="http://docs.jquery.com/Main_Page" STYLE="TEXT-DECORATION: NONE; color: #25FF00;">Jquery Documentation/Help</a><br>
<a href="http://stackoverflow.com/" STYLE="TEXT-DECORATION: NONE; color: #25FF00;">Stack Overflow</a><br>
<a href="http://www.w3schools.com/" STYLE="TEXT-DECORATION: NONE; color: #25FF00;">w3schools.com</a><br>
</div>

<div class="Title"><a href="#"STYLE="TEXT-DECORATION: NONE; color: #FF7200;">Gaming</a></div>
<div class="links">
<a href="http://docs.jquery.com/Main_Page" STYLE="TEXT-DECORATION: NONE; color: #FF7200;">Jquery Documentation/Help</a><br>
<a href="http://stackoverflow.com/" STYLE="TEXT-DECORATION: NONE; color: #FF7200;">Stack Overflow</a><br>
<a href="http://www.w3schools.com/" STYLE="TEXT-DECORATION: NONE; color: #FF7200;">w3schools.com</a><br></div>

<div class="Title"><a href="#"STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Grub</a></div>
<div class="links">
<a href="http://docs.jquery.com/Main_Page" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Jquery Documentation/Help</a><br>
<a href="http://stackoverflow.com/" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Stack Overflow</a><br>
<a href="http://www.w3schools.com/" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">w3schools.com</a><br>
</div>

<div class="Title"><a href="#"STYLE="TEXT-DECORATION: NONE; color: #F8FF00;">Drinks</a></div>
<div class="links">
<a href="http://docs.jquery.com/Main_Page" STYLE="TEXT-DECORATION: NONE; color: #F9FF00;">Jquery Documentation/Help</a><br>
<a href="http://stackoverflow.com/" STYLE="TEXT-DECORATION: NONE; color: #F8FF00;">Stack Overflow</a><br>
<a href="http://www.w3schools.com/" STYLE="TEXT-DECORATION: NONE; color: #F8FF00;">w3schools.com</a><br>
</div>
</div>

</body>
</html>

【问题讨论】：

标签： jquery jquery-ui html jquery-ui-accordion

【解决方案1】：

我为您发布了a demo...这是我使用的脚本：

$(function() {
    $("#accordion").accordion({
        event: "mouseover",
        collapsible: true,
        active: false
    });
    // Fade out all Titles except for the active one
    $(".Title:not(.ui-state-active)").fadeTo(1,0.25);
    $(".Title").hover(function () {
        $(this).stop().fadeTo(250,1)
            .closest(".Title").find(".links").fadeTo(250,0.75);
    }, function() {
        // Fade out all titles except the active one
        $(".Title:not(.ui-state-active)").fadeTo(1,0.25);
        // Make sure the active title is faded in
        if ($(this).is('.ui-state-active')) {
            $(this).stop().fadeTo(250,1);
        }
    });
});

【讨论】：

感谢您的帮助，这正是我需要的。我遇到的下一个问题是第一个面板，标有“参考”，在页面加载时显示为打开状态。有没有一种方法可以在页面加载时隐藏它并在用户将鼠标悬停在“参考”上时显示。但仍保持相同的平滑向上/向下运动？
我更新了上面的答案和演示 (jsfiddle.net/U83Rd/1)，只需在初始化手风琴时将 collapsible: true, active: false 添加到选项中即可。
谢谢，我真的很喜欢你用来做这个的 jsfiddle“在线渲染”。你是怎么找到的？

【解决方案2】：

您的手风琴中的每个项目都由一个 div.Title 和一个 div.links 组成。将这些手风琴项中的每一个包装在另一个 div 中，并将悬停功能应用到其中：

<div class="accordionItemWrap">
    <div class="Title"><a href="#" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Grub</a></div>
    <div class="links">
        <a href="#" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Jquery Documentation/Help</a><br>
        <a href="#" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Stack Overflow</a><br>
        <a href="#" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">w3schools.com</a><br>
    </div>
</div>

JS：

$(document).ready(function(){
    $(".Title").fadeTo(1,0.25);
    $(".accordionItemWrap").hover(
        function () {
            $(this).find('.Title').fadeIn();
            $(this).find(".links").fadeIn();
        }, 
        function () {
            $(this).find('.Title').fadeOut();
            $(this).find(".links").fadeOut();
        }
    );
});

【讨论】：

这不起作用，因为 jquery 读取代码的方式。它丢失了标题部分并将“内容”称为标题。把它想象成推倒一切。此外，我只是在寻找它淡化为不透明而不完全淡出。