Vì vậy, tôi đang cố gắng tạo thanh điều hướng khi bạn nhấp vào nút/nhịp, sẽ xuất hiện một div, từ trên xuống dưới thanh điều hướng . Nhưng, khi tôi nhấp vào 'Homer', đầu tiên không có gì xảy ra, nhưng lần thứ hai tôi nhấp vào, sau đó nó xuất hiện VỚI HIỆU QUẢ KHÁC, mà tôi đã không sử dụng bất cứ nơi nào. [. Tôi không biết tên của hiệu lực, nhưng div xuất hiện từ riêng góc trên bên trái của nó]Sự cố với jQuery Hoạt ảnh khi nhấp - Hai lần cần thiết + Hiệu ứng sai
Đây là những gì tôi muốn điều đó sẽ xảy ra:
Khi tôi bấm vào 'Homer' trong điều hướng thanh, một div xuất phát từ thân thể đến cơ thể. Div phải di chuyển đến 0px dưới thanh điều hướng, do đó không có khoảng trống giữa phía dưới của thanh điều hướng và đầu div (ẩn-homer). Khi tôi nhấp lại vào Homer, div (ẩn-homer) phải rời khỏi màn hình một lần nữa, vì vậy hãy di chuyển lên.
Trong JSFiddle, nó không hoạt động ở tất cả các ...
- Không có lỗi trong Firefox Console, 1 cảnh báo: "Sử dụng getPreventDefault() bị phản đối sử dụng defaultPrevented thay.."
- Không có lỗi trong JSHint (JSFiddle)
Vì vậy, 2 vấn đề:
- Khi tôi nhấp vào 'Homer', không có gì xảy ra.
- Khi tôi nhấp lần thứ hai vào 'Homer' - không tải lại trang - div xuất hiện với hiệu ứng sai ở vị trí sai (bên dưới thanh điều hướng, vì vậy bạn không thể nhìn thấy một phần của nó).
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="jquery.js"></script>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<div id="nav">
<span>Homer</span>
<span>Marge</span>
<span>Bart</span>
<span>Lisa</span>
<span>Maggie</span>
</div>
<div id="hidden-homer" class="hidden">
<h1>Homer</h1>
<p>Text</p>
</div>
<div id="hidden-marge" class="hidden">
<h1>Marge</h1>
<p>Text</p>
</div>
<div id="hidden-bart" class="hidden">
<h1>Bart</h1>
<p>Text</p>
</div>
<div id="hidden-lisa" class="hidden">
<h1>Lisa</h1>
<p>Text</p>
</div>
<div id="hidden-maggie" class="hidden">
<h1>Maggie</h1>
<p>Text</p>
</div>
<div id="intro">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/The_Simpsons_Logo.svg/300px-The_Simpsons_Logo.svg.png">
</div>
jQuery:
<script>
var main = function() {
$('#nav span:nth-child(1)').click(function() {
$('#hidden-homer').toggle(function() {
$(this).animate({top: '70px'}, 100);
}, function() {
$(this).animate({top: '-70px'}, 100);
});
});
};
$(document).ready(main);
</script>
CSS:
body {
background-color: #0040FF;
padding: 0px;
margin: 0px;
}
a {
outline: none;
}
#nav {
height: 70px;
line-height: 70px;
background-color: #FFBF00;
font-size: 0px;
text-decoration: none;
width: 100%;
text-align: center;
font-family: sans-serif;
margin-bottom: none;
z-index: 1;
}
#nav span {
display: inline-block;
font-size: 35px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
border-right: 3px solid #0040FF;
height: 70px;
cursor: pointer;
color: #0040FF;
text-decoration: none;
font-weight: bold;
}
#nav span:first-child {
border-left: 3px solid #0040FF;
}
#nav span:hover {
background-color: #0040FF;
color: #FFBF00;
}
.hidden {
width: 100%;
height: 200px;
padding-left: 30px;
background-color: #1C1C1C;
color: red;
font-size: 10px;
top: -250px;
position: absolute;
z-index: -1;
border: 2px solid black;
}
img {
height: 200px;
width: 400px;
transform: rotate(10deg);
}
Bạn đang sử dụng phiên bản jQuery nào? Dạng hai hàm '.toggle()' đã bị loại bỏ trong 1.9. – Barmar
@Barmar Uncompressed: http://code.jquery.com/jquery-1.11.2.js – HydraCles
Sau đó, bạn không thể sử dụng '.toggle' như thế. Xem http://stackoverflow.com/questions/2459153/alternative-to-jquerys-toggle-method-that-supports-eventdata – Barmar