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

时间：2016-02-08 14:19:53

标签： javascript jquery css

你好我在另一支手风琴里面有一个嵌套的手风琴。顶级和嵌套手风琴都打开但不关闭。我注意到我的文字链接包含在<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-->

2 个答案:

答案 0 :(得分：1)

您正在检查是否jQuery(e.target).is('.active')，然后将active类添加到不同的jQuery（this），将e.target（和f.target）更改为此，它将会工作：

（检查代码段中的控制台）

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-->

答案 1 :(得分：0)

这是因为您点击的是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）

    2. ，或者

    1. 将所有e.target和f.target替换为e.target.parentNode和f.target.parentNode，以便在您点击{{1}时实际检查a元素}，h2元素。
相关问题
最新问题