Question

我有一个小控制面板，其中包含三个div（标题，内容和虚拟div）。在该面板上方，我有一个按钮，点击它时必须隐藏并显示内容。

我的目标是当我点击按钮更改内容div的ID时，隐藏它并显示时，按钮也必须从关闭更改为打开。在这个阶段，我让内容出现并消失，但它被窃听。我想我必须使用stopPropegation但我不知道如何。如果你可以解决它，我会很高兴。提前致谢。

html代码：

<!DOCTYPE html>

<html>

    <head>
        <title>Control Panel</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">  

        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="collapseExpand.js"></script> 
    </head>

    <body>
        <div id="button">
            <a href="javascript:void(0);" onclick="return hideShowContent()">Close</a> 

        </div>

        <div class="wrapper">
            <h1>Title</h1>

            <div id="content"> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </div>
        </div>

        <div id="dummyDiv">
            test division
        </div>

    </body>

</html>

css代码：

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}

#button{
    margin-bottom: 10px;
}

h1{
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: 1px solid gray; 
}

.wrapper{
    border: 1px solid gray;
    width: 430px;   
}

#content, #contentHide{
    margin: 10px;

}

#dummyDiv{
    margin-top: 10px;
    font-weight: bold;
    font-size: 1.2em;
}

JavaScript代码：

function hideShowContent() {
    console.log('The button was clicked');

    $(document).ready(function() {
        $('#button').click(function() {

            $("#content").attr('id', 'contentHide');
            $('#contentHide').hide(500);        
        });           
    });


    $(document).ready(function() {
        $('#button').click(function() {
             $("#contentHide").attr('id', 'content');   
            $('#content').show(500);

        });     
    });
}

JSfiddle：http://jsfiddle.net/wvLfbfgh/

Answer 1

我已修复您的脚本，您只需要：

$(document).ready(function() {
    $('#button').click(function() {           
        $("#content").toggle(500);       
    });           
});

http://jsfiddle.net/wvLfbfgh/1/

基本上，您创建了函数并将其绑定到内联onclick="return hideShowContent()，并且该函数还会在每次单击时绑定新事件。这是错误的，只在$(document).ready你的行动中定义。而不是使用隐藏/显示，使用toggle自动检测是否显示目标

Answer 2

只需将jQuery中的所有内容更改为：

function hideShowContent() {
    $("#content").slideToggle(500);
}

或者这取决于您的偏好：

$('#button').on('click', function(){
    $("#content").slideToggle(500);
});

它多次触发，因为它会触发函数hideShowContent()和$('#button').click。

Answer 3

点击按钮会隐藏，然后显示内容。你忘记了什么：

if (hidden)
   show()
else
  hide();

得到了吗？ ; - ）

Answer 4

DEMO

请尽量避免使用内联JS。以下代码都会将按钮的文字更改为Open/Close，并会在#content和hide之间切换show元素。

由于您定义了函数的方式，click事件会多次绑定。只需单击一次，这将导致多次#content div swinging。

$(document).ready(function() {
    $('#button').click(function() {
        if( $("#content").is(':visible') ) {  
            $(this).find('a').text('Open');
            $('#content').hide(500);
        } else {
            $(this).find('a').text('Close');
            $('#content').show(500);
        }
        hideShowContent();
    });     
});

Answer 5

试试以下代码

  $(document).ready(function() { 
    $('#button').click(function() {                      
        $('#content').slideToggle(500);            
    });     
});

或者您可以只使用切换

Answer 6

删除javascript onclick函数并添加以下代码

   $(document).ready(function() {
      $('#button').click(function() {
         $("#content").is(':visible')  ? $(this).find('a').text('Open') : $(this).find('a').text('Close');
         $("#content").toggle(500);  
      });
   });

如何正确触发onClick事件

6 个答案: