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

Try this:

$(".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 回答