Question

我经过深思熟虑后做了一点Jquery（因为我是新手），发现它不能正常工作！请参阅我的代码，我想要点击var trigger设置的元素，var obj设置的元素应fadeToggle()，但是当我点击{ {1}}它被展示了一会儿（只是一秒钟！）然后就消失了！我只是不会出现问题，但你可以有live demo（看问题）。顺便说一句代码在这里 -

trigger

在jsFiddle上，它显示以下错误（仅当您在RESULT字段上执行操作之前单击RUN时。） -

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js" ></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(function () {
                   var trigger = 'trigger' ;
                   var obj = 'slide' ;

                    $('.' + trigger).click(function () {
                       $('.' + obj).fadeToggle(); 
                    }); 
                });
            });
        </script>
        <style>
            div.head
            {
             background: #000;
             opacity: 0.7;
             color: #fff;
             font-weight: bold;
             font-size: 12px;
             font-family: segoe ui;
             padding: 5px 5px; 
            }
            div.head a
            {
             text-decoration: none;
             color: #fff;  
            }

            div.slide
            {
             display: none;
             background: #000;
             opacity: 0.7;
             color: #fff;
             font-weight: bold;
             font-size: 12px;
             font-family: segoe ui;
             padding: 5px 5px;  
            }            
        </style>
    </head>
    <body>
        <div class="head">
            <a class="trigger" href="">Click Me!</a>
            <div class="slide">
                Hi Friends!
            </div>
        </div>
    </body>
</html>

任何人都可以帮我解决这个问题。提前谢谢！

Answer 1

看起来您的链接正在被遵循。你可以prevent that from happening这样：

 $('.' + trigger).click(function(e) {
     e.preventDefault();   
     $('.' + obj).fadeToggle(); 
 });

Answer 2

$('.trigger').click(function(e) {
    e.preventDefault();
    $('.slide').fadeToggle();
});

此外，您不需要有2个就绪功能。

$(document).ready(function () {

与

相同

$(function () {

检查http://jsfiddle.net/RfgkU/

处的工作示例

Answer 3

你不需要$（文件）.ready（function（）{

$（函数（）{}）;足以指定必须在页面加载时运行的命令。这也适用于所有浏览器。

同时指定e.preventDefault（）;作为click函数的第一行，告诉jQuery忽略链接上的点击。

Answer 4

导致此问题的display: none属性尝试将其内联：

<div class="slide" style="display:none;">

Jquery Toggle功能不起作用！

4 个答案:

检查http://jsfiddle.net/RfgkU/