如何在这个例子中显示/隐藏div？

Question

如何点击xxxx显示<div id="list-name" class="list-item">的内容并点击xxx1x .........

$(document).ready(
  function() {
    $("#list-groupname").click(function() {
      $("#list-name").toggle();
    });
  });



div.list-group-item {
  display: none !important;
  opacity: 0;
}

.showitems {
  display: block;
}

#list-filtername {
  display: block;
}



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group">
  <a id="list-groupname" class="list-item">xxxx</a>
    <div id="list-name" class="list-item">
      <div id="name-group2000020">
        <div class="checkbox">
          <input type="checkbox" name="x" value="z1" checked="checked" />Checkbox
        </div>
    </div>
  </div>
<a id="list-groupname" class="list-item">xxx1x</a>
  <div id="list-name" class="list-item">
    <div id="name-group2000021">
      <div class="checkbox">
        <input type="checkbox" name="x" value="z1" checked="checked" />Checkbox1
      </div>
    </div>
  </div>
</div>

点击xxxx show但xxxx1x不显示。我很抱歉，BEGINNER

没有成功

Answer 1

• 首先，如果你没有使用超链接，请不要使用<a> anchor tag，你可以制作use of span or div instead。
• 如果您想最初将内容设置为隐藏，只需将qazxsw poi的CSS设置为display：none。
• list-name在一个以上的容器中。
• 从锚标记中删除类Don't make use of the same ID。

"list-item"

$(document).ready(
  function() {
    $(".list-groupname").click(function() {
      $(this).next(".list-item").toggle();
    });
  });

.list-item{
display:none;
}

Answer 2

使用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group">
  <span class="list-groupname">xxxx</span>
    <div id="list-name1" class="list-item">
      <div id="name-group2000020">
        <div class="checkbox">
          <input type="checkbox" name="x" value="z1" checked="checked" />Checkbox
        </div>
    </div>
  </div>
<span class="list-groupname">xxx1x</span>
  <div id="list-name2" class="list-item">
    <div id="name-group2000021">
      <div class="checkbox">
        <input type="checkbox" name="x" value="z1" checked="checked" />Checkbox1
      </div>
    </div>
  </div>
</div>

和你的班级名称toggleClass，这是你需要的，如果不是，请发表评论，我会非常乐意帮助和编辑我的答案！

list-group-item

    $(document).ready(
        function() {
            $("#list-groupname").click(function() {
                $("#list-name").toggleClass("list-group-item");
            });
        });

    div.list-group-item {
      display: none !important;
      opacity: 0 ;
    }
    
    .showitems {
      display: block;
    
    }
    #list-filtername {
      display: block;
    
    }

Answer 3

如果您在单击时希望它显示复选框，则只需使用.show（）而不是.toggle（）并将其初始显示属性设置为none。使用您的代码，它似乎适用于切换复选框，如果这是您尝试做的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group">
            <a id="list-groupname" class="list-item">xxxx</a>
        <div id="list-name" class="list-item">
          <div id="name-group2000020">
                    <div class="checkbox">
    		<input type="checkbox" name="x" value="z1" checked="checked" />
    				</div>
    	  </div>
    	</div>
    </div>

 $(document).ready(function() {
 	$("#list-groupname").click(function() {
 			$("#list-name").show()
	});
});

div.list-group-item {
      display: none !important;
      opacity: 0 ;
    }
    
    .showitems {
      display: block;
    
    }
    #list-filtername {
      display: block;
    
    }

<!-- begin snippet: js hide: false console: true babel: false -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group">
            <a id="list-groupname" class="list-item">xxxx</a>
        <div id="list-name" class="list-item">
          <div id="name-group2000020">
                    <div class="checkbox">
    		<input type="checkbox" name="x" value="z1" checked="checked" />
    				</div>
    	  </div>
    	</div>
    </div>