Question

我希望按钮在单击时显示div，在外部单击时隐藏。 （页面上的任何位置）以下代码无效 - 我不确定，为什么？

我正在尝试;

<div class="side_button" id="side_button2">
TEXT 1
</div>

<div class="side_button" id="side_button3">
TEXT 2
</div>

CSS

#page_button2 {
    display: none;
    position: absolute;
    height: 300px;
    width: 400px;
    border: 1px dotted red;
    z-index: 999;
}

#page_button3 {
    display: none;
    position: absolute;
    height: 300px;
    width: 400px;
    border: 1px dotted red;
    z-index: 999;
}

.side_button { 
    height: 60px;
    border-bottom: 1px solid #333;
    color: #333;
    font-family: "KlavikaBasic-Bold";


    background-image: linear-gradient(bottom, #e5edda 6%, #fff 100%);
    background-image: -o-linear-gradient(bottom, #e5edda 6%, #fff 100%);
    background-image: -moz-linear-gradient(bottom, #e5edda 6%, #fff 100%);
    background-image: -webkit-linear-gradient(bottom, #e5edda 6%, #fff 100%);
    background-image: -ms-linear-gradient(bottom, #e5edda 6%, #fff 100%);

    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.06, #dce6cc),
    color-stop(1, #fff)
   );


}

JS

<script>

// Click to View Page
$(document).ready(function(){

$('#side_button2').click(function() {
    $('#page_button2').show();
    $('#page_button3').hide();
});

$('#side_button3').click(function() {
    $('#page_button3').show();
    $('#page_button2').hide();
});
// 

</script>

HTML

<!-- Show / Hide Div Side BTN -->

<div id="page_button2">
Test 1.
</div>

<div id="page_button3">
Test 2.
</div>

<!-- // Show / Hide Div Side BTN -->

Answer 1

正如我在评论中所说，您似乎缺少});来关闭$(document).ready(。没有它，您可能会收到语法错误

试试这个：

$(document).ready(function(){

    $('#side_button2').click(function() {
        $('#page_button2').show();
        $('#page_button3').hide();
    });

    $('#side_button3').click(function() {
        $('#page_button3').show();
        $('#page_button2').hide();
    });

});

简单的方法.show。隐藏#div onClick

1 个答案: