Question

我正在尝试添加一个侧边栏，使用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();
});
});

Answer 1

在按钮2的类名前面缺少.。试试这个：

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

Answer 2

试试这个：

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

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

    $(".sidebar").show();
    $(".sidebarBtn").show();
});

点击jQuery后，我的第二个“打开”按钮没有响应

2 个答案: