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。
如果您要初始设置要隐藏的内容，只需将list-name的CSS设置为 display：none 即可。
Don't make use of the same ID在多个容器中。
从锚标记中删除类"list-item"。

＆＃13;

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

＆＃13;

.list-item{
display:none;
}

＆＃13;

<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>

＆＃13;

Answer 2

将toggleClass与您的班级名称list-group-item一起使用，这是您所需要的，如果不是，请发表评论，我将非常乐意帮助和编辑我的答案！

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

如果您在单击时希望显示该复选框，则只需使用.show（）而不是.toggle（）并将其初始显示属性设置为none。使用您的代码，如果您正在尝试执行此操作，它似乎可以切换复选框。

＆＃13;

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

＆＃13;

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 -->

＆＃13;

<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>

＆＃13;

<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" style = "display: none;">
          <div id="name-group2000020">
                    <div class="checkbox">
            <input type="checkbox" name="x" value="z1" checked="checked" />
                    </div>
          </div>
        </div>
    </div>

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

3 个答案: