嵌套手风琴不会以 h2 作为链接关闭

Nested accordion doesn't close with h2 as link

本文关键字:链接 h2 手风琴 嵌套      更新时间:2023-09-26

你好,我在另一个手风琴中有一个嵌套的手风琴.顶层和嵌套手风琴都打开但不关闭。我注意到我的文本链接被包装在一个<h1><h2>中,如果我删除标签它会关闭。底部的手风琴选项卡关闭。

jQuery(document).ready(function() {
  function close_accordion_section() {
    jQuery('.accordion .accordion-section-title').removeClass('active');
    jQuery('.accordion .accordion-section-title').attr('aria-hidden', 'false') //added		
    jQuery('.accordion .accordion-section-title').attr('aria-expanded', 'false')
    jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
  }
  function close_accordion_sectionNest() {
    jQuery('.accordionNest h3.accordion-section-titleNest').removeClass('active');
    jQuery('.accordionNest h3.accordion-section-titleNest').attr('aria-hidden', 'false') //added		
    jQuery('.accordionNest h3.accordion-section-titleNest').attr('aria-expanded', 'false')
    jQuery('.accordionNest .accordion-section-contentNest').slideUp(300).removeClass('open');
  }
  jQuery('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = jQuery(this).attr('href');
    if (jQuery(e.target).is('.active')) {
      close_accordion_section();
    } else {
      close_accordion_section();
      // Add active class to section title
      jQuery(this).addClass('active');
      // Add ARIA expanded state
      jQuery(this).attr('aria-expanded', 'true')
        // Open up the hidden content panel
      jQuery(this).attr('aria-hidden', 'true') //added				
      jQuery(this).attr('aria-selected', 'true') //added
        // Add ARIA elected state			
      jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
    }
    e.preventDefault();
  });
  jQuery('.accordion-section-titleNest').click(function(f) {
    // Grab current anchor value
    var currentAttrValueNest = jQuery(this).attr('href');
    if (jQuery(f.target).is('.active')) {
      close_accordion_sectionNest();
    } else {
      close_accordion_sectionNest();
      // Add active class to section title
      jQuery(this).addClass('active');
      // Add ARIA expanded state
      jQuery(this).attr('aria-expanded', 'true')
        // Open up the hidden content panel
      jQuery(this).attr('aria-hidden', 'true') //added				
      jQuery(this).attr('aria-selected', 'true') //added
        // Add ARIA elected state			
      jQuery('.accordionNest ' + currentAttrValueNest).slideDown(300).addClass('open');
    }
    f.preventDefault();
  });
});
/**  ---------------Document List Accordion------------------  **/
.accordionCol {
  margin-bottom: 10px;
}
.accordionColNest {
  margin-bottom: 10px;
}
.accordion,
.accordionNest,
.accordion,
.accordionNest * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.accordion,
.accordionNest {
  overflow: hidden;
  border: 1px solid #f1eac0;
  border-radius: 3px;
  background: #fff;
  width: 98%;
  position: relative;
}
.accordion,
.accordionNest p {
  font-size: 100%;
}
.accordion-section,
.accordion-sectionNest {
  position: relative;
  width: 100%;
  padding-top: 5px;
}
/*----- Section Titles -----*/
a.accordion-section-title h2 {
  width: 100%;
  padding: 15px 10% 15px 5%;
  display: inline-block;
  border-bottom: 0px solid #1a1a1a;
  transition: all linear 0.15s;
  /* Type */
  color: #000;
  text-decoration: none;
  background-image: url("/site-resources/resource-files/img/arrow-lg.png") !important;
  background-repeat: no-repeat !important;
  background-color: #fbf5db;
  background-position: 1% 50% !important;
  position: relative;
  border: 0px solid #f1eac0;
}
a.accordion-section-titleNest h3 {
  width: 100%;
  padding: 15px 10% 15px 5%;
  display: inline-block;
  transition: all linear 0.15s;
  color: #000;
  text-decoration: none;
  background-image: url("/site-resources/resource-files/img/arrow-sm.png") !important;
  background-repeat: no-repeat !important;
  padding-bottom: 5px;
  border-bottom: 1px solid #f1eac0;
  background-position: 1% 50% !important;
  position: relative;
}
a.accordion-section-title:hover {
  /* Type */
  background-image: url("/site-resources/resource-files/img/arrow-lg.png") !important;
  background-repeat: no-repeat;
  background-color: #fbf5db;
  text-decoration: none;
  background-position: 0% 50%;
}
a.accordion-section-titleNest h3.visited,
a.accordion-section-titleNest:hover h3 {
  /* Type */
  background-image: url("/site-resources/resource-files/img/arrow-sm.png") !important;
  background-repeat: no-repeat;
  text-decoration: none;
  background-position: 0% 50%;
}
a.accordion-section-title.active {
  /* Type */
  background-image: url("/site-resources/resource-files/img/arrow-lg-dn.png") !important;
  background-repeat: no-repeat;
  background-color: #fbf5db;
  text-decoration: none;
  background-position: 0% 50%;
}
a.accordion-section-titleNest.active h3 {
  /* Type */
  background-image: url("/site-resources/resource-files/img/arrow-sm-dn.png") !important;
  background-repeat: no-repeat;
  text-decoration: none;
  background-position: 0% 50%;
}
.accordion-section:last-child a.accordion-section-title h2,
.accordion-section:last-child a.accordion-section-titleNest h3 {
  border-bottom: none;
}
/*----- Section Content -----*/
.accordion-section-content,
.accordion-section-contentNest {
  padding: 15px;
  display: none;
  text-decoration: none;
  width: 97%;
}
.evenStripe {
  background-color: #fbf5db !important;
}
/****--------------- Document List ---------------------***/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="accordionCol">
  <div class="accordion">
    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-1"><h2>Tab 1 click here</h2></a>
      <div class="accordion-section-content" id="accordion-1">
        <!--Nested Accordion starts here-->
        <!--Nested Accordion starts here-->
        <div class="accordionCol">
          <div class="accordionNest">
            <div class="accordion-sectionNest"><a class="accordion-section-titleNest" href="#accordionNest-1"><h3>nested tab</h3></a>
              <div class="accordion-section-contentNest" id="accordionNest-1">
                <!---*********************** INNER datatable starts here **********************--->
                <p>this is some content. nothing to see here, move along now</p>
                <!---************************ INNER datatable ENDs here **************************--->
              </div>
            </div>
            <div class="accordion-sectionNest"><a class="accordion-section-titleNest" href="#accordionNest-3"><h3>nested tab</h3></a>
              <div class="accordion-section-contentNest" id="accordionNest-3">
                <p>this is some content. nothing to see here, move along now</p>
              </div>
            </div>
            <div class="accordion-sectionNest"><a class="accordion-section-titleNest" href="#accordionNest-6"><h3>nested tab</h3></a>
              <div class="accordion-section-contentNest" id="accordionNest-6">
                <p>this is some content. nothing to see here, move along now</p>
              </div>
            </div>
            <div class="accordion-sectionNest"><a class="accordion-section-titleNest" href="#accordionNest-7"><h3>nested tab</h3></a>
              <div class="accordion-section-contentNest" id="accordionNest-7">
                <p>this is some content. nothing to see here, move along now</p>
              </div>
            </div>
          </div>
          <!---Close Accordion Col --->
        </div>
        <!---Close Accordion Nest --->
        <!--Nested Accordion ENDS here-->
      </div>
    </div>
    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-3"><h2>Tab 2 click here</h2></a>
      <div class="accordion-section-content" id="accordion-3">
        <p>this is some content. nothing to see here, move along now</p>
      </div>
    </div>
    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-4"><h2>Tab 3 click here</h2></a>
      <div class="accordion-section-content" id="accordion-4">
        <p>this is some content. nothing to see here, move along now</p>
      </div>
    </div>
    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-5"><h2>Tab 4 click here</h2></a>
      <div class="accordion-section-content" id="accordion-5">
        <p>this is some content. nothing to see here, move along now</p>
      </div>
    </div>
    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-6"><h2>Tab 5 click here</h2></a>
      <div class="accordion-section-content" id="accordion-6">
        <p>this is some content. nothing to see here, move along now</p>
      </div>
    </div>
    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-7">Tab6 click here</a>
      <div class="accordion-section-content" id="accordion-7">
        <p>this is some content. nothing to see here, move along now</p>
      </div>
    </div>
  </div>
  <!--end Accordion -->
</div>
<!--end Accordion-Col-->

您正在检查是否jQuery(e.target).is('.active'),然后将active类添加到 jQuery(this) 中,这些类不相同,将 e.target(和 f.target)更改为 this,它将起作用:

(检查代码段中的控制台)

jQuery(document).ready(function() {
  function close_accordion_section() {
    jQuery('.accordion .accordion-section-title').removeClass('active');
    jQuery('.accordion .accordion-section-title').attr('aria-hidden', 'false') //added		
    jQuery('.accordion .accordion-section-title').attr('aria-expanded', 'false')
    jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
  }
  function close_accordion_sectionNest() {
    jQuery('.accordionNest h3.accordion-section-titleNest').removeClass('active');
    jQuery('.accordionNest h3.accordion-section-titleNest').attr('aria-hidden', 'false') //added		
    jQuery('.accordionNest h3.accordion-section-titleNest').attr('aria-expanded', 'false')
    jQuery('.accordionNest .accordion-section-contentNest').slideUp(300).removeClass('open');
  }
  jQuery('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = jQuery(this).attr('href');
    console.log("this",jQuery(this));
    console.log("e.target",jQuery(e.target));
    if (jQuery(this).is('.active')) {
      close_accordion_section();
    } else {
      close_accordion_section();
      // Add active class to section title
      jQuery(this).addClass('active');
      // Add ARIA expanded state
      jQuery(this).attr('aria-expanded', 'true')
        // Open up the hidden content panel
      jQuery(this).attr('aria-hidden', 'true') //added				
      jQuery(this).attr('aria-selected', 'true') //added
        // Add ARIA elected state			
      jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
    }
    e.preventDefault();
  });
  jQuery('.accordion-section-titleNest').click(function(f) {
    // Grab current anchor value
    var currentAttrValueNest = jQuery(this).attr('href');
    console.log("this",jQuery(this));
    console.log("f.target",jQuery(f.target));
    if (jQuery(this).is('.active')) {
      close_accordion_sectionNest();
    } else {
      close_accordion_sectionNest();
      // Add active class to section title
      jQuery(this).addClass('active');
      // Add ARIA expanded state
      jQuery(this).attr('aria-expanded', 'true')
        // Open up the hidden content panel
      jQuery(this).attr('aria-hidden', 'true') //added				
      jQuery(this).attr('aria-selected', 'true') //added
        // Add ARIA elected state			
      jQuery('.accordionNest ' + currentAttrValueNest).slideDown(300).addClass('open');
    }
    f.preventDefault();
  });
});
/**  ---------------Document List Accordion------------------  **/
.accordionCol {
  margin-bottom: 10px;
}
.accordionColNest {
  margin-bottom: 10px;
}
.accordion,
.accordionNest,
.accordion,
.accordionNest * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.accordion,
.accordionNest {
  overflow: hidden;
  border: 1px solid #f1eac0;
  border-radius: 3px;
  background: #fff;
  width: 98%;
  position: relative;
}
.accordion,
.accordionNest p {
  font-size: 100%;
}
.accordion-section,
.accordion-sectionNest {
  position: relative;
  width: 100%;
  padding-top: 5px;
}
/*----- Section Titles -----*/
a.accordion-section-title h2 {
  width: 100%;
  padding: 15px 10% 15px 5%;
  display: inline-block;
  border-bottom: 0px solid #1a1a1a;
  transition: all linear 0.15s;
  /* Type */
  color: #000;
  text-decoration: none;
  background-image: url("/site-resources/resource-files/img/arrow-lg.png") !important;
  background-repeat: no-repeat !important;
  background-color: #fbf5db;
  background-position: 1% 50% !important;
  position: relative;
  border: 0px solid #f1eac0;
}
a.accordion-section-titleNest h3 {
  width: 100%;
  padding: 15px 10% 15px 5%;
  display: inline-block;
  transition: all linear 0.15s;
  color: #000;
  text-decoration: none;
  background-image: url("/site-resources/resource-files/img/arrow-sm.png") !important;
  background-repeat: no-repeat !important;
  padding-bottom: 5px;
  border-bottom: 1px solid #f1eac0;
  background-position: 1% 50% !important;
  position: relative;
}
a.accordion-section-title:hover {
  /* Type */
  background-image: url("/site-resources/resource-files/img/arrow-lg.png") !important;
  background-repeat: no-repeat;
  background-color: #fbf5db;
  text-decoration: none;
  background-position: 0% 50%;
}
a.accordion-section-titleNest h3.visited,
a.accordion-section-titleNest:hover h3 {
  /* Type */
  background-image: url("/site-resources/resource-files/img/arrow-sm.png") !important;
  background-repeat: no-repeat;
  text-decoration: none;
  background-position: 0% 50%;
}
a.accordion-section-title.active {
  /* Type */
  background-image: url("/site-resources/resource-files/img/arrow-lg-dn.png") !important;
  background-repeat: no-repeat;
  background-color: #fbf5db;
  text-decoration: none;
  background-position: 0% 50%;
}
a.accordion-section-titleNest.active h3 {
  /* Type */
  background-image: url("/site-resources/resource-files/img/arrow-sm-dn.png") !important;
  background-repeat: no-repeat;
  text-decoration: none;
  background-position: 0% 50%;
}
.accordion-section:last-child a.accordion-section-title h2,
.accordion-section:last-child a.accordion-section-titleNest h3 {
  border-bottom: none;
}
/*----- Section Content -----*/
.accordion-section-content,
.accordion-section-contentNest {
  padding: 15px;
  display: none;
  text-decoration: none;
  width: 97%;
}
.evenStripe {
  background-color: #fbf5db !important;
}
/****--------------- Document List ---------------------***/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="accordionCol">
  <div class="accordion">
    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-1"><h2>Tab 1 click here</h2></a>
      <div class="accordion-section-content" id="accordion-1">
        <!--Nested Accordion starts here-->
        <!--Nested Accordion starts here-->
        <div class="accordionCol">
          <div class="accordionNest">
            <div class="accordion-sectionNest"><a class="accordion-section-titleNest" href="#accordionNest-1"><h3>nested tab</h3></a>
              <div class="accordion-section-contentNest" id="accordionNest-1">
                <!---*********************** INNER datatable starts here **********************--->
                <p>this is some content. nothing to see here, move along now</p>
                <!---************************ INNER datatable ENDs here **************************--->
              </div>
            </div>
            <div class="accordion-sectionNest"><a class="accordion-section-titleNest" href="#accordionNest-3"><h3>nested tab</h3></a>
              <div class="accordion-section-contentNest" id="accordionNest-3">
                <p>this is some content. nothing to see here, move along now</p>
              </div>
            </div>
            <div class="accordion-sectionNest"><a class="accordion-section-titleNest" href="#accordionNest-6"><h3>nested tab</h3></a>
              <div class="accordion-section-contentNest" id="accordionNest-6">
                <p>this is some content. nothing to see here, move along now</p>
              </div>
            </div>
            <div class="accordion-sectionNest"><a class="accordion-section-titleNest" href="#accordionNest-7"><h3>nested tab</h3></a>
              <div class="accordion-section-contentNest" id="accordionNest-7">
                <p>this is some content. nothing to see here, move along now</p>
              </div>
            </div>
          </div>
          <!---Close Accordion Col --->
        </div>
        <!---Close Accordion Nest --->
        <!--Nested Accordion ENDS here-->
      </div>
    </div>
    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-3"><h2>Tab 2 click here</h2></a>
      <div class="accordion-section-content" id="accordion-3">
        <p>this is some content. nothing to see here, move along now</p>
      </div>
    </div>
    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-4"><h2>Tab 3 click here</h2></a>
      <div class="accordion-section-content" id="accordion-4">
        <p>this is some content. nothing to see here, move along now</p>
      </div>
    </div>
    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-5"><h2>Tab 4 click here</h2></a>
      <div class="accordion-section-content" id="accordion-5">
        <p>this is some content. nothing to see here, move along now</p>
      </div>
    </div>
    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-6"><h2>Tab 5 click here</h2></a>
      <div class="accordion-section-content" id="accordion-6">
        <p>this is some content. nothing to see here, move along now</p>
      </div>
    </div>
    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-7">Tab6 click here</a>
      <div class="accordion-section-content" id="accordion-7">
        <p>this is some content. nothing to see here, move along now</p>
      </div>
    </div>
  </div>
  <!--end Accordion -->
</div>
<!--end Accordion-Col-->

这是因为

您单击的是h2/h3元素,而不是a元素。你可以

  1. 像这样将h2/h3移出a

    <div class="accordion-section">
       <h2>
         <a class="accordion-section-title" href="#accordion-3">
          Tab 1 click here
        </a>
      </h2>
     ......
    

    (这将需要编辑您的 css)

  1. 将所有e.targetf.target替换为e.target.parentNodef.target.parentNode,以便在单击h2h3元素时实际检查a元素。