0

クリックすると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 -->
4

1 に答える 1

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();
    });

});
于 2013-02-06T19:09:56.780 に答える