Jquery 滑鼠，滑鼠_Jquery_Html - Fatal编程技术网

Jquery 滑鼠，滑鼠

jquery html

Jquery 滑鼠，滑鼠,jquery,html,Jquery,Html,我有一个常见问题和问题页面。如果用户将鼠标悬停在某个问题上，则会显示答案但是如果你现在将鼠标悬停在一个问题上，所有的答案都会显示出来。什么不必是。只有所选问题的答案必须可见 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>A One Page Faq</title> <link href="Content/site.css

我有一个常见问题和问题页面。如果用户将鼠标悬停在某个问题上，则会显示答案

但是如果你现在将鼠标悬停在一个问题上，所有的答案都会显示出来。什么不必是。只有所选问题的答案必须可见

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>A One Page Faq</title>
    <link href="Content/site.css" rel="stylesheet">
    <script src="Scripts/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.answer').hide();
            var $answer = $(this).next('.answer');
            $('.main h2').mouseover(function () {
                $('.answer').show();
                $answer.slideDown();
                $(this).addClass('close');
            });
            $('.main h2').mouseout(function () {
                $('.answer').hide();
                $answer.fadeOut();
                 $(this).removeClass('close');
            });           

        }); // end ready
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <div class="main">
                <h1>A One Page FAQ</h1>
                <div class="faq">
                    <h2>I've heard that JavaScript is the long-lost fountain of youth. Is this true?</h2>
                    <div class="answer">
                        <p>Why, yes it is! Studies prove that learning JavaScript freshens the mind and extends life span by several hundred years. (Note: some scientists disagree with these claims.)</p>
                    </div>
                </div>
                <div class="faq">
                    <h2>Can JavaScript really solve all of my problems?</h2>
                    <div class="answer">
                        <p>Why, yes it can! It's the most versatile programming language ever created and is trained to provide financial management advice, life-saving CPR, and even to take care of household pets.</p>
                    </div>
                </div>
                <div class="faq">
                    <h2>Is there nothing JavaScript <em>can&#8217;t</em> do?</h2>
                    <div class="answer">
                        <p>Why, no there isn&#8217;t! It&#8217;s even able to write its own public relations-oriented Frequently Asked Questions pages. Now that&#8217;s one smart programming language!</p>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <p>JavaScript &amp; jQuery: The Missing Manual, 3rd Edition, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
        </footer>
    </div>
</body>
</html>

不会发生任何事情

之所以会发生这种情况，是因为您使用的类选择器实际上选择了所有元素，并且该类具有此类

$（'.answer'）.show（）
您需要更改代码以选择最接近问题的答案，并将其显示为
            $('.main h2').mouseover(function (e) {
               $('.answer').hide();//Hide All Other Answers
               $(e).closest('.answer').show();//Show Closest Answer To Question


            });

还有老鼠出来
$('.main h2').mouseout(function (e) {
   $('.answer').hide();
});

替换此
 $('.main h2').mouseover(function () {
     $('.answer').show();
     $answer.slideDown();
     $(this).addClass('close');
 });
 $('.main h2').mouseout(function () {
     $('.answer').hide();
     $answer.fadeOut();
     $(this).removeClass('close');
 });

与
$('.main h2').mouseover(function () {
   $(this).siblings('.answer').show();
   $(this).siblings('.answer').slideDown();
   $(this).addClass('close');
});
$('.main h2').mouseout(function () {
   $(this).siblings('.answer').hide();
   $(this).siblings('.answer').fadeOut();
   $(this).removeClass('close');
});

它会帮助你的
 使用$.next（）。刚才您正在更改所有类。answer to show and all.answer to slideDown（在$（document）.ready（）中）您从整个文档（$this）中获取元素，然后在代码中运行它）
试试这个
$('.main h2').mouseover(function () {
    $(this).next('.answer').show();
    $(this).next('.answer').slideDown();
    $(this).addClass('close');
});

$(document).ready(function () {
    $('.answer').hide();
    var $answer = $(this).next('.answer');
    $('.main h2').mouseover(function () {
        $(this).find('.answer').show();
        $answer.slideDown();
        $(this).addClass('close');
    });
    $('.main h2').mouseout(function () {
        $(this).find('.answer').hide();
        $answer.fadeOut();
        $(this).removeClass('close');
    });

}); //

您也应该删除这两行代码
$('.answer').hide();
var $answer = $(this).next('.answer');

并应用显示：隐藏；到你的。回答CSS类。
试试这种方法；]

$（文档）.ready（函数（）{
$（'.answer'）.hide（）；
$（'.main h2'）。on（'mouseover'，function（）{
$（this.next（）.slideDown（300）；
$（this.addClass（'close'）；
});
$（'.main h2'）。on（'mouseout'，函数（）{
$（this.next（）.slideUp（300）；
$（this.removeClass（'close'）；
});           
}); // 结束就绪
h2{
背景：url（_images/open.png）不重复0 11px；
填充：10px 0 25px；
光标：指针；
}
h2.close{
背景图片：url（_images/close.png）；
}
.答复{
左边距：25px；
}

一页的常见问题解答
我听说JavaScript是久违的青春源泉。这是真的吗？
为什么，是的！研究证明，学习JavaScript可以更新大脑，延长数百年的寿命。（注：一些科学家不同意这些说法。）
JavaScript真的能解决我所有的问题吗？
为什么，是的，它可以！它是有史以来最通用的编程语言，经过培训可以提供财务管理建议、救生CPR，甚至可以照顾家庭宠物
JavaScript能做什么’；不行？
为什么，没有’；T它’；它甚至能够编写自己的面向公共关系的常见问题页面。现在’；这是一种聪明的编程语言
JavaScript&；jQuery：缺少的手册，第三版，作者。出版人
试试这个
$('.main h2').mouseover(function () {
    $(this).next('.answer').show();
    $(this).next('.answer').slideDown();
    $(this).addClass('close');
});

$(document).ready(function () {
    $('.answer').hide();
    var $answer = $(this).next('.answer');
    $('.main h2').mouseover(function () {
        $(this).find('.answer').show();
        $answer.slideDown();
        $(this).addClass('close');
    });
    $('.main h2').mouseout(function () {
        $(this).find('.answer').hide();
        $answer.fadeOut();
        $(this).removeClass('close');
    });

}); //

非常感谢。但如果我在一个问题上徘徊，什么也不会发生。查看我的更新