0

在下面的示例中，我试图div在用户单击链接时显示 a 并在单击链接时关闭相同div的链接。

问题在于中间的代码，它检查 adiv在单击链接时是否可见。现在，单击相同的链接不会隐藏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>
4

6 回答 6

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

于 2013-10-23T06:02:55.483 回答
2

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

 $(document).ready(function() {
     $(".addUser").click(function(){
         var form = $(this).find(".demoForm");
         $('.demoForm').not(form).hide();        
         form.toggle();
     });
 });
于 2013-10-23T06:07:58.843 回答
0

利用：

$(".addUser").click(function(){
    var $demoForm = $(this).find('.demoForm');
    $demoForm.toggle();
});
于 2013-10-23T05:59:54.817 回答
0

尝试

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

或更好

$(".addUser").click(function(){
            $(this).find(".demoForm").toggle();
    });
于 2013-10-23T06:01:03.540 回答
0

只需toggleClass用于此，请参阅http://api.jquery.com/toggleClass/

使用这样的课程

.display
{
display:none;
}

单击链接切换此类

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

演示小提琴

于 2013-10-23T06:02:19.817 回答
0

您可以省略一些行。

$(".addUser").click(function(){
        $(this).parent().find(".demoForm").toggle();
});
于 2013-10-23T06:02:54.403 回答