Jquery 手风琴和褪色

发布于 2024-09-01 11:45:03 字数 3595 浏览 2 评论 0原文

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

原文

I am trying to create a jquery accordion that fades the header of the accordion out when the page is loaded then fades it in when the mouse hovers. The accordion also opens when the mouse hovers. I am able to get all of this working, the problem I am having is when the accordion opens the header moves away and the mouse is no longer on it to keep it lit. I would like the links to keep the header lit as well as if the mouse is on the header itself. Below is the code that I wrote for it.

<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> </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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱情眠于流年 2024-09-08 11:45:03

我为您发布了演示...这是我使用的脚本：

$(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);
        }
    });
});

I posted a demo for you... here is the script I used:

$(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);
        }
    });
});

回复收藏 0 原文

伴我心暖 2024-09-08 11:45:03

手风琴中的每个项目都包含一个 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();
        }
    );
});

Each item in your accordion consists of a div.Title and a div.links. Wrap each of those accordion items in another div and apply your hover function to that:

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

回复收藏 0 原文

~没有更多了~