Question

我正在尝试创建一个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>

Answer 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);
        }
    });
});

Answer 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手风琴和褪色

2 个答案: