Question

单击IMG后，我想进入下一个后续DIV，以便根据当前显示状态显示或隐藏DIV内容。

这是一个HTML代码段：

<div>
  <span class="expand"><img src="images/plus.gif"></span>
  <span>Subject Heading</span>
</div>
<div class="record hidden">Display or Hide this text</div>

我有一些代码（provided in another answer on this site）用于在表格中执行此操作。我会为img或包含范围设置一个事件监听器吗？不知道如何使用parent（），next（），sibling（）函数来解决....

另外，如何测试导航是否正确到达正确的元素？你可以使用警报来显示id或值吗？

感谢任何帮助感谢

Answer 1

更简洁的方法是在折叠和展开之间切换图像的父级，然后在css中，您可以使用上下文选择器隐藏折叠的div中的嵌套div。

只需2美分。

Answer 2

这是一个有效的例子：

<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>

<div>
  <span class="expand"><img src="x.jpg"></span>
  <span>Subject Heading</span>
</div>
<div class="record hidden">Display or Hide this text</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('.expand img').toggle(
        function(){
            $(this).parent().parent().next().hide();
        },
        function(){
            $(this).parent().parent().next().show();
        });
    });
</script>

请注意，我正在使用父级两次，因为事件已添加到图像中，其父级是span，其父级是div。

Answer 3

一个好看的地方是选择器下的Visual jQuery Docs：http://screencasts.visualjquery.com/

我认为你正在尝试做类似

的事情

$（本）.parent（）下一个（ '隐藏。'）;

在你的onClick函数中

？

希望有所帮助！

Answer 4

Allain是正确的，最好只在父母上操作，然后使用CSS选择器来显示或隐藏孩子，翻转+/-图像等等。但无论如何，here是功能代码，它做了什么你想要的方式是：

<html>

<head>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  <script type="text/javascript">
    $( document ).ready( function() {
        $( '.expand img' ).click(
            function() {
                $(this).parents( 'div' ).eq( 0 ).siblings( '.record' ).eq( 0 ).toggleClass( 'hidden' );
            }
        );
    } );
  </script>

  <style type="text/css">
    .hidden {
        display: none;
    }
  </style>

</head>

<body>

  <div>
    <span class="expand"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></span>
    <span>Subject Heading</span>
  </div>
  <div class="other">Don't care about this</div>
  <div class="record hidden">Display or Hide this text</div>

</body>

</html>

Answer 5

这就是我目前使用的，感谢Adam ......但我也会探讨Allain的建议。

$(function(){
$('.expand img').toggle(
    function(){
        $(this).parent().parent().next().show();
        $(this).attr('src', 'images/minus.gif') ;
    },
    function(){
        $(this).parent().parent().next().hide();
        $(this).attr('src', 'images/plus.gif') ;
    });
});

Answer 6

您有几种选择：

$('.expand').click(function () {
  $(".record").toggle();
});

或

$('.expand').click(function () {
  $(".record").slideToggle("slow");
});

虽然如果您要根据它与点击的img的相关性来定位下一个div，那么您需要使用.parent（'span'）。parent（'div'）。next（ '记录'）

使用jQuery遍历DOM

6 个答案: