我有以下html代码
<a href="javascript:">
<img class="remove" src="images/remove.png" />
</a>
<div class="content">
<h2>About</h2>
<p>We are Sydney Wedding Photographers and have ...</p>
</div>
看起来像这样
现在，单击“X”图像后，“内容”div 应该隐藏和显示。但是“X”图像应该会触发这件事。
试试这个代码
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.6/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('.remover').click(function() {
$('.content').toggle();
});
});
</script>
<style>
.remove { cursor: pointer; }
</style>
</head>
<body>
<img class="remove" src="images/remove.png" />
<div class="content">
<h2>About</h2>
<p>We are Sydney Wedding Photographers and have ...</p>
</div>
</body>
</html>
您可以使用 Jquery toggle() 函数来实现这一点。我已经完成了按钮点击，您可以在链接点击事件中编写相同的内容。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<title>Untitled Page</title>
<script type="text/javascript">
$(document).ready(function() {
$("#link").click(function() {
$('.content').toggle();
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="link" ></button>
<div class="content">
<h2>About</h2>
<p>We are Sydney Wedding Photographers and have ...</p>
</div>
</div>
</form>
</body>
</html>