Question

我的代码可以在这里找到：

在这里：

<button id="button" onclick="fade()" id="button">Shrink</button>

<div id="fadeScreen">
    <div class="fadePart"></div>
</div>

所以基本上，我希望div在单击按钮时显示和隐藏，但简单的jQuery不起作用。怎么了？

Answer 1

您只需要toggle()，但首先需要将.fadePart设置为隐藏

$(document).ready(function () {   
    $("#button").click(function () {    
        $(".fadePart").toggle();
    });    
});

您的标记包含onclick=fade()，其中fade()代码中不存在onclick <{1}}

Fiddle Demo

Answer 2

尝试此操作以显示/隐藏div。

$('button').on('click', function(){
    if(!$(this).hasClass('clicked')){
        $('#fadeSreen').hide();
        $(this).addClass('clicked')
    } else {
        $('#fadeSreen').show();
        $(this).removeClass('clicked')
    }

});

或者这个。

$('button').on('click', function(){
        $('#fadeSreen').slideToggle();
})

Fiddle Demo

Answer 3

您的代码中存在一些问题：

你的#fadeScreen元素正在“隐藏”你的按钮（z-index明智......），并且'click'适用于它，而不是你的按钮（git它是背景颜色，你会看到它隐藏了按钮）。
不要“双重绑定”“点击”事件，而只是执行此操作：

$（ “＃键”）。单击（函数（）{ $（ “fadePart”）切换（）; }）;

Answer 4

使用此Don't provide more than one id attribute inside the tag

HTML

<button id="button">Shrink</button>

        <div id="fadeScreen">
            <a class="fadePart"></a>
        </div>

JS

$(document).ready(function(){
  $("#button").click(function(){  
    $("a").toggleClass('fadePart');
  });
});

DEMO

Answer 5

你的小提琴包含一些错误。我在这里纠正了错误......

    <button id="button" id="button">Shrink</button>    
    <div id="fadeScreen">
        <div class="fadePart"></div>
    </div>

    $(document).ready(function(){
        $('button').click(function(){}
            $('#fadeScreen').toggle();
        });
    });

参考以下小提琴 - [小提琴1]：http://jsfiddle.net/hCzLG/

jQuery在点击时改变div的大小

5 个答案: