Question

我在使脚本工作时遇到了一些麻烦。我不知道我哪里错了。任何帮助将不胜感激。它正在学习中。

我在我的页面上设置了一个切换工作正常，但是当内容div打开时，我在open div中有一个关闭按钮，当点击时需要关闭内容div。这是我的代码：

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".chairmanContent").hide();
  //toggle the componenet with class msg_body
  jQuery(".chairmanReadmore").click(function()
  {
    jQuery(this).next(".chairmanContent").slideToggle(500);
  });
});

jQuery(document).ready(function() {
  jQuery(".chairmanContent").hide();
  //toggle the componenet with class msg_body
  jQuery(".chairmanClose").click(function()
  {
    jQuery(this).next(".chairmanContent").slideUp(500);
  });
});
</script>

我不确定使用slideUp是解决此问题的正确方法。

Answer 1

所以而不是.next()使用.closest()：

改变这个：

jQuery(this).next(".chairmanContent").slideUp(500);

到此：

jQuery(this).closest(".chairmanContent").slideUp(500);
//-----------^-----^---------use closest here.

在我看来，您的关闭按钮"chairmanClose"位于此div "chairmanContent"内，因此在这种情况下，您必须使用.closest()遍历您的div。

您可以通过以下方式简化代码：

<script type="text/javascript">
jQuery(document).ready(function($) {
  $(".chairmanContent").hide();
  //toggle the componenet with class msg_body
  $(".chairmanReadmore").click(function(){
    $(this).next(".chairmanContent").slideToggle(500);
  });

  //toggle the componenet with class msg_body
  $(".chairmanClose").click(function(){
    $(this).closest(".chairmanContent").slideUp(500);
  });
});
</script>

您不需要两个jQuery(document).ready();函数而不是它可以在单个doc ready方法中执行它，您可以使用$符号作为jQuery的别名，就像我建议的那样。< / p>

Answer 2

我希望我完全理解，我为你编写示例代码而不必使用slideUp（）

请检查：http://jsfiddle.net/mehmetakifalp/m9RE4/

    $(".toggleSlide").click(function(){
        $(".content").slideToggle();
    });

    $(".closeContent").click(function(){
        $(".content").slideToggle();
    });

带有单独关闭按钮的JQuery slideToggle功能

2 个答案: