Question

所以我有这个，在用户点击.item_list之后它会显示它应该是什么，如果他们点击.upload_items li它没有做任何事情。我很遗憾为什么。这里是fiddle，其中包含更多详细信息。发布的HTML太多了

  $('.upload_items').hide(); 
  $('.item-list').click(function() {        
    $(".upload_items").slideDown();    
    $('#node_project_form_group_document').show();
    $('#edit-field-video').hide();
    $('#edit-field-images-upload').hide();
  });
  $('.upload_items').children('li').eq(1).click(function () {
    $('#node_project_form_group_document').show();
  });

Answer 1

哇，这看起来非常糟糕。而不是.children（'li'）。eq（1），而是尝试使用CSS。

$(".upload_items li:nth-of-type(1)").click();

Answer 2

好的 - 所以你在小提琴中提供的html真的太过分了，所以我创建了一个非常简单的例子来展示/隐藏使用jQuery的toggle()函数的部分，我建议这种情况，因为它会自动检测目标元素的当前可见状态。示例：http://jsfiddle.net/Lv1wwfp2/2/

<body>
    <ul>
        <li class="clickable" data-id="1">Group 1</li>
        <li class="clickable" data-id="2">Group 2</li>
        <li class="clickable" data-id="3">Group 3</li>
    </ul>
    <div id="Group1">Group 1</div>
    <div id="Group2">Group 2</div>
    <div id="Group3">Group 3</div>
    <script>
        $(document).ready(function () {
            $("div").hide();
            $(".clickable").click(function () {
                var id = $(this).data("id");
                $("#Group" + id).toggle();

            });
        });
    </script>
</body>

jQuery .show（）没有按预期工作。隐藏得很好，但没有表现出来

2 个答案: