0

我正在尝试选择两个父母元素（父母兄弟姐妹和祖父母兄弟姐妹），并在孩子点击时让它们“折叠”。

我试过 {toggle/hide/show/addClass 等}。

起初，我试图选择曾祖父母，但这没有奏效……；充其量会隐藏所有内容，并且无法切换回来。toggle 和 addClass 方法除了防止默认值外，根本没有做任何事情。

html结构如下：

great-grandparent <div class='section' id='section-18'>
 grandparent       <div class='docs'>
      parent        <div class='octowrap'>
            *          <a class='octothorpe' href='#section-18'>#</a>

编辑特定的html：`

 <div class='section' id='section-6'>
   <div class='docs'>
    <div class='octowrap'>
      <a class='octothorpe' href='#section-6'>#</a>
    </div>
   <p><strong>image:</strong><br> <IMG SRC="i.jpg" ALT="img" WIDTH=100 HEIGHT=90></p>
   </div>
   <div class='code'>

</div>

fold style .fold { 显示：无；}

下面不能按我的预期工作，我怎样才能让这个代码工作？

$(function () {
    $('.octothorpe').on({
        click: function (e) {
            e.preventDefault();
            var pfold = $(this).closest('.octowrap').siblings('p');
            var cfold = $(this).closest('.docs').siblings('.code');
            $pfold = $(pfold);
            $cfold = $(cfold);
            //$pfold.hide();
            //$cfold.hide();

            if (!$pfold.hasClass("fold") && !$cfold.hasClass("fold")) {
                $cfold.slideUp().addClass('fold');
                $pfold.slideUp().addClass('fold');
                console.log('fold', $('.fold').length);
            } else {

                cfold.slideDown().removeClass('fold');
                pfold.slideDown().removeClass('fold');
            }
        }
    });
});

编辑：就我期望函数做的是 pfold 应该选择

octowrap 的兄弟姐妹。cfold 应该选择文档的代码兄弟。然后，当单击子 ahref 时，元素应向上/向下滑动。顺便说一句，我也尝试过切换，但没有运气！

发生什么了 ？

4

1 回答 1

0

我认为一切都是正确的，除了兄弟（）方法本身抛出 jquery 对象。无需再次将它们包装为 jquery 对象。文档之前还有一个缺失的点。这是更正后的代码。

$('.octothorpe').on({
                      click:function(e){
                          e.preventDefault();
                          var $pfold =$(this).closest('.octowrap').siblings('p');
                          var $cfold =$(this).closest('.docs').siblings('.code');
                          //$pfold.hide();
                          //$cfold.hide();

                          if (!$pfold.hasClass("fold") && !$cfold.hasClass("fold")) {
                              $cfold.slideUp().addClass('fold');
                              $pfold.slideUp().addClass('fold');
                          }
                          else {
                              $cfold.slideDown().removeClass('fold');
                              $pfold.slideDown().removeClass('fold');
                          }    
                      }
                  });
于 2013-08-27T19:24:02.470 回答