Question

我有一个页面，我希望在点击链接后显示一些段落，然后才能隐藏它。所以我写了一个简单的JQuery代码，但问题是当我点击打开链接时，所有其他隐藏的div也会显示出来。我的代码如下，请咨询如何解决问题。

HTML

<div>
<a href="#" class="open_div">Read More</a>

<div class="expand_div">
<a href="#" class="close_div"><img src="images/close_button.gif" width="50" height="12" alt="Close" border="0" /></a>
<p>My hidden content goes here..</p>
</div>
</div>

我想重复上述<div>块7次。因此，当我点击第一个div的“阅读更多”按钮时，其余6个隐藏的div也显示!!!

JQuery的

<script language="JavaScript">
 $(document).ready(function(){
    $('a.open_div').click(function(){
            $('.expand_div').show();
    });

    $('a.close_div').click(function(){
            $('.expand_div').hide();
    });

  });
</script>

如何解决这个问题..？

任何答案都将不胜感激！

由于

保

Answer 1

试试这个而不是你的JQuery代码：

<script language="JavaScript">
 $(document).ready(function(){
    $('a.open_div').click(function(){

          $(this).parent().find('.expand_div').show();
    });

    $('a.close_div').click(function(){
           $(this).parent().hide();
    });

  });
</script>

您的代码存在的问题是它正在选择页面内的所有div。这不是你想要的。要解决此问题，此代码仅将操作范围限制为当前链接容器，因此其他div将保持原样而不做任何更改。

Answer 2

好吧，选择器将选择该类的所有元素。如果您保留这样的结构，则可以执行以下操作：

$(document).ready(function(){
    $('a.open_div').click(function(){
          $(this).next().show();
    });

    $('a.close_div').click(function(){
          $(this).closest('.expand_div').hide();
    });
});

由于div是开放链接的下一个兄弟，next()将选择div并显示它。另一边的密切链接是div的后代。 closest()会找到与选择器匹配的最近祖先。

当然还有其他方法可以选择元素。

查看working DEMO。

Answer 3

在open事件中，您需要打开DOM中的“next”元素：

$('a.open_div').click(function() {
    $(this).next().show();
});

在close事件中，您需要关闭封闭（父）元素：

$('a.close_div').click(function() {
    $(this).parent().hide();
});

请参阅http://jsfiddle.net/raybellis/vZbp3/

Answer 4

您将获得所有“expand_div”元素并显示它们。您只需选择与this元素相关的适当元素。

<script language="JavaScript">
 $(document).ready(function(){
    $('a.open_div').click(function(){
            $(this).siblings('.expand_div').show();
    });

    $('a.close_div').click(function(){
            $(this).parent().siblings('.expand_div').hide();
    });

  });
</script>

需要JQuery建议

4 个答案: