Question

在下面的示例中，我尝试在用户点击链接时显示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>

Answer 1

<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代码中已经足够了。

Answer 2

除了之前的答案，您仍然可以使用您的逻辑，只需忽略当前项目。 jsFiddle

上的示例

 $(document).ready(function() {
     $(".addUser").click(function(){
         var form = $(this).find(".demoForm");
         $('.demoForm').not(form).hide();        
         form.toggle();
     });
 });

Answer 3

使用：

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

Answer 4

尝试

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

或更好

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

Answer 5

只需使用toggleClass即可查看http://api.jquery.com/toggleClass/

使用像这样的课程

.display
{
display:none;
}

点击链接

切换此课程

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

Demo fiddle

Answer 6

你可以省略一些行。

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

显示隐藏带链接的div

6 个答案: