Показать скрыть div со ссылкой [дубликата]

0

В приведенном ниже примере я пытаюсь показать 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>
  • 0
    Всем, кто ответил, if есть, чтобы удалить любой существующий div, который виден. Сначала я ищу любой существующий видимый div, затем закрываю его, затем открываю новый рядом с его родителем. Вот так все и идет.
Теги:

6 ответов

2
Лучший ответ

В дополнение к предыдущим ответам вы все равно можете использовать свои логики, просто игнорируйте текущий элемент. Пример на jsFiddle

 $(document).ready(function() {
     $(".addUser").click(function(){
         var form = $(this).find(".demoForm");
         $('.demoForm').not(form).hide();        
         form.toggle();
     });
 });
  • 0
    Вы правильно поняли.
  • 0
    У меня много ответов, пока я создавал образец jsfiddle. Не забудьте выбрать один в качестве ответа.
Показать ещё 2 комментария
4
<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-коде.

0

Вы можете опустить некоторые строки.

$(".addUser").click(function(){
        $(this).parent().find(".demoForm").toggle();
});
0

Использование:

$(".addUser").click(function(){
    var $demoForm = $(this).find('.demoForm');
    $demoForm.toggle();
});
0

Просто используйте toggleClass для этого см http://api.jquery.com/toggleClass/

используйте такой класс

.display
{
display:none;
}

переключить этот класс по щелчку ссылки

$("#link").click(function(){
$("#test").toggleClass("display");
})

Демо-скрипка

0

пытаться

 $(".addUser").click(function(){
        if($('.demoForm').is(':visible')){
            $('.demoForm').hide();
        }
            $(this).find(".demoForm").toggle();
    });

или лучше

$(".addUser").click(function(){
            $(this).find(".demoForm").toggle();
    });

Ещё вопросы

Сообщество Overcoder
Наверх
Меню