Question

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

我试过{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 {display：none; }

下面的

无法正常工作，我怎样才能使这段代码正常工作？

$(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应该选择docs的代码兄弟。然后，当点击子ahref时，元素应该向上/向下滑动。顺便说一下，我也尝试过切换但没有运气！

最近怎么回事？

Answer 1

我认为一切都是正确的，除了siblings（）方法抛出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');
                          }    
                      }
                  });

选择2个祖先点击切换/隐藏

1 个答案: