0

jQueryを使用して、ボタンをクリックするだけで表示および非表示になるサイドバーを追加しようとしています。しかし、何らかの理由で私の div ".sidebarBtn2" をクリックできませんか? 私が間違っていることについて何か考えはありますか？

CSS:

.sidebar {
width: 200px;
height: 800px;
background: red;
border: 1px solid black;
position: absolute;
right: 0;
}

.sidebarBtn {
text-align: center;
height: 80px;
width: 20px;
border-top-left-radius: 30%;
border-bottom-left-radius: 30%;
background: orange;

position: absolute;
right: 198px;
top: 328px;
}

.sidebarBtn2:hover,
.sidebarBtn:hover {
cursor: pointer;
}

.sidebarBtn2 {
text-align: center;
height: 80px;
width: 20px;
border-top-left-radius: 30%;
border-bottom-left-radius: 30%;
background: orange;

position: absolute;
right: 0px;
top: 328px; 
}

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
    <div class="sidebarBtn">
        C</br>l</br>o</br>s</br>e</br>
    </div>
    <div class="sidebar"></div>
    <div class="sidebarBtn2">
        O</br>p</br>e</br>n</br>
    </div>

    <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Javascript

$(document).ready(function() {
$(".sidebarBtn2").hide();

$(".sidebarBtn").click(function() {
        $(".sidebarBtn").hide();
        $(".sidebar").hide();
    $(".sidebarBtn2").show();
});

$(".sidebarBtn2").click(function() {
    $("sidebarBtn2").hide();
    $("sidebar").show();
    $("sidebarBtn").show();
});
});
4

2 に答える 2

4

.ボタン2のクラス名の前にありません。これを試してください：

$(".sidebarBtn2").click(function() {
    $(".sidebarBtn2").hide();
    $(".sidebar").show();
    $(".sidebarBtn").show();
});
于 2013-03-18T15:44:43.963 に答える
1

これを試して：

$(".sidebarBtn2").click(function() {

    // You can also use $(this).hide(); in place of $(".sidebarBtn2").hide();
    $(".sidebarBtn2").hide();       

    $(".sidebar").show();
    $(".sidebarBtn").show();
});
于 2013-03-18T15:46:22.827 に答える