1

我试图通过 选择一个元素class，当它被点击时，父级被切换。

HTML：

`

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

`

$('octothorpe').closest('div.section').click(function() {
                    $(".fold").toggle(500);
                      console.log('fold', $('.fold').length);

                });
});

console.log("closest", $('.octothorpe').closest('div.section').length);

`

<style>
.fold {
    display: None;
}
</style>

`

q1 回答 <<都不起作用，那么如何测试类元素是否被选中？我可以输出标准控制台日志消息吗？（我尝试查看 firefox 检查器，但无法判断它是否被选中。我如何测试这种简单的方法？（即不改变颜色等。只是在日志中？）>>

我链接功能是否正确单击和切换？只有孩子可以被点击，（octothorpe 是一个 href），但是父 .section 是什么需要被切换？

对于下面的代码：

控制台日志。（对于父母的测试）最接近 = 1 ，永远不会改变。
（用于测试折叠）每次单击时折叠增量。但是即使使用 preventDefault()，toggleClass 也没有效果。风格display:None在这种情况下不起作用吗？

`

$(function() {
  $(".octothorpe").click(function(e) {
                             e.preventDefault();
                             var sector = $(this).closest("div.section");
                             sector.toggleClass(".fold");
                             //sector.(".fold").toggle();
                             console.log('fold', $('.fold').length);
                         });
  });

console.log("closest", $('.octothorpe').closest('div.section').length);

嗨，谢谢到目前为止。经过一番摆弄后，我想我不能只选择曾祖父母，而是选择父母兄弟姐妹和祖父母兄弟姐妹。如果我只选择曾祖父母类，那么元素本身就会丢失，因为我无法将它带回来！

因此，我尝试了下面更具选择性的代码。但是，如下所示的 hide 或 slideUp/Down 似乎都没有做任何事情。console.log 输出显示折叠类递增，因此正在选择元素。

这段代码有什么问题？

`

$(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');
                              }    
                          }
                      });

});

`

`

4

3 回答 3

1

您可以使用 .parent() 方法。

所以考虑：

<div class="parent">
  <a href="#" class="child">click me</a>
</div>

js 将是：

$(function(){
  $('.child').on({
    click:function(e){
      e.preventDefault();
      //stop it from refreshing the page

      $(this).parent().toggle();
      //$(this) is the what you clicked on - <a class="child">
      //.parent() is the <div class="parent">
      //.toggle() show/hide the .parent()
    }
  });
});

现在这段代码有点愚蠢。由于您隐藏了父母，这意味着您自动隐藏了孩子。所以 .toggle() 是愚蠢的。更好的方法是：

$(function(){
  $('.child').on({
    click:function(e){
      e.preventDefault();
      //stop it from refreshing the page

      $(this).parent().hide();
      //$(this) is the what you clicked on - <a class="child">
      //.parent() is the <div class="parent">
      //.hide() hide the .parent()
    }
  });
});
于 2013-08-23T22:12:17.463 回答
1 
console.log($('.section').length);

会告诉你有多少元素被选中。如果您想知道.fold选择器是否正常工作，请将

console.log($('.fold').length);

在您的点击功能中。

于 2013-08-23T20:20:32.013 回答
1

假设您在一个容器上有 Sections 而在另一个容器上有锚点（如果您打算像索引/内容列表一样使用它们是有意义的）我会这样做：

$(".octothorpe").click(function(e) {
    e.preventDefault();
    var sectorhash = $(this).attr("href");
    $sector = $(sectorhash);
    if (!$sector.hasClass("fold")) {
        $sector.slideUp().addClass("fold");
    }
    else {
        $sector.slideDown().removeClass("fold"); 
    }
});
于 2013-08-23T22:16:47.463 回答