В приведенном ниже примере я пытаюсь показать div
когда пользователь нажимает на ссылку, а также закрывает тот же div
когда нажимается ссылка.
Проблема заключается в промежуточном коде, который проверяет, отображается ли div
во время щелчка ссылки. Теперь нажатие на ту же ссылку не скрывает div
, на что я надеялся.
Я немного застрял на этом. Это просто, но я просто не могу понять, как правильно это сделать.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Generated by Edit Plus</title>
<link rel="stylesheet" href="http://localhost/site/css/bootstrap.css"
media="screen">
<script type="text/javascript"
src="http://localhost/site/scripts/jQueryCore.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".addUser").click(function(){
if($('.demoForm').is(':visible')){
$('.demoForm').hide();
}
$(this).parent().find(".demoForm").toggle();
});
});
</script>
<style type="text/css">
.toolOptions{
display:none;
}
</style>
</head>
<body>
<div class="container">
<div>
<div class="addUser">Add a new user
<span class="demoForm" style="display:none;">I'm the form div.</span>
</div>
</div>
<div>
<div class="addUser">Add a new user
<span class="demoForm" style="display:none;">I'm the form div.</span>
</div>
</div>
<div>
<div class="addUser">Add a new user
<span class="demoForm" style="display:none;">I'm the form div.</span>
</div>
</div>
</div>
</body>
</html>
В дополнение к предыдущим ответам вы все равно можете использовать свои логики, просто игнорируйте текущий элемент. Пример на jsFiddle
$(document).ready(function() {
$(".addUser").click(function(){
var form = $(this).find(".demoForm");
$('.demoForm').not(form).hide();
form.toggle();
});
});
<script type="text/javascript">
$(document).ready(function() {
$(".addUser").click(function(){
var current=$(this).parent().find(".demoForm");// current element
$('.demoForm').not(current).hide(); //hide the rest
$(this).parent().find(".demoForm").toggle();//toggle the current
});
});
</script>
Этого достаточно в js-коде.
Вы можете опустить некоторые строки.
$(".addUser").click(function(){
$(this).parent().find(".demoForm").toggle();
});
Использование:
$(".addUser").click(function(){
var $demoForm = $(this).find('.demoForm');
$demoForm.toggle();
});
Просто используйте toggleClass
для этого см http://api.jquery.com/toggleClass/
используйте такой класс
.display
{
display:none;
}
переключить этот класс по щелчку ссылки
$("#link").click(function(){
$("#test").toggleClass("display");
})
пытаться
$(".addUser").click(function(){
if($('.demoForm').is(':visible')){
$('.demoForm').hide();
}
$(this).find(".demoForm").toggle();
});
или лучше
$(".addUser").click(function(){
$(this).find(".demoForm").toggle();
});
if
есть, чтобы удалить любой существующий div, который виден. Сначала я ищу любой существующий видимый div, затем закрываю его, затем открываю новый рядом с его родителем. Вот так все и идет.