停止多次写入相同的功能

时间：2017-06-14 23:49:18

标签： javascript jquery

所以我可能会把自己扔给这里的狮子但是......

我只是不确定如何编写下面的jquery，所以如果/将来要添加更多的手风琴，我不必一遍又一遍地重复该功能。我不知道如何定位以数字结尾的ID。

提前致谢。

$('#acc-group-1 > .aria-accordion').click(function() {
  $('#acc-group-1 > .aria-accordion.open').not(this).removeClass('open').children('.aria-accordion-item').slideUp();
  $(this).toggleClass('open');
  $(this).children('.aria-accordion-item').slideToggle();

});

$('#acc-group-2 > .aria-accordion').click(function() {
  $('#acc-group-2 >.aria-accordion.open').not(this).removeClass('open').children('.aria-accordion-item').slideUp();
  $(this).toggleClass('open');
  $(this).children('.aria-accordion-item').slideToggle();

});
.aria-accordion {
  margin-bottom: 30px;
  position: relative;
}

.corner-stripes {
  content: '';
  background: url(../img/new_corner_stripes.svg);
  background-repeat: no-repeat;
  width: 120px;
  position: absolute;
  z-index: 3;
  top: 0;
  right: -10px;
  overflow: hidden;
  height: 58px;
  -webkit-transition: all 400ms linear;
  -moz-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  -ms-transition: all 400ms linear;
  transition: all 400ms linear;
}

.aria-accordion.open .corner-stripes {
  height: 120px;
}

.aria-accordion-item {
  background: #e8e8e8;
  padding: 25px 30px;
  display: none;
  margin-bottom: 30px;
}

.aria-accordion-trigger h6 {
  cursor: pointer;
  margin: 0;
  padding: 15px 0;
  text-indent: 70px;
  position: relative;
  font-size: 20px;
  color: #000;
  background: #e8e8e8;
  background-position: top left;
  background-size: cover;
  z-index: 1;
}

a.aria-accordion-trigger {
  position: relative;
  display: block;
}

a.aria-accordion-trigger::before {
  position: absolute;
  left: 10px;
  top: -10px;
  width: 43px;
  height: 49px;
  background: rgba(252, 221, 0, 0.8);
  content: '\f067';
  font-family: fontAwesome;
  font-size: 25px;
  text-align: center;
  line-height: 49px;
  z-index: 2;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}

.aria-accordion.open a.aria-accordion-trigger::before {
  content: '\f068';
}

a.aria-accordion-trigger:hover::before,
.aria-accordion.open a.aria-accordion-trigger::before {
  background: #00b3e3;
}

.aria-accordion ul {
  margin-left: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="acc-group-1">

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend.</p>
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique <a id="target">senectus et netus</a> et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
        mi vitae est. Mauris placerat eleifend.</p>
    </div>
  </div>

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique <a id="target">senectus et netus</a> et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
        mi vitae est. Mauris placerat eleifend.</p>
    </div>
  </div>


  <hr/>
</div>

<div id="acc-group-2">

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend.</p>
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique <a id="target">senectus et netus</a> et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
        mi vitae est. Mauris placerat eleifend.</p>
    </div>
  </div>

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique <a id="target">senectus et netus</a> et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
        mi vitae est. Mauris placerat eleifend.</p>
    </div>
  </div>


  <hr/>
</div>

3 个答案:

答案 0 :(得分：4)

对我来说，我认为不需要像建议的其他答案一样使用[id^=acc-group] ..您可以使用.aria-accordion.open选择器并在click事件中从父级中选择所有[id^=acc-group]类.closest()您需要使用.find()和$('[id^=acc-group] > .aria-accordion').click(function() { $(this).closest('[id^=acc-group]').find('.aria-accordion.open').not(this).removeClass('open').children('.aria-accordion-item').slideUp(); $(this).toggleClass('open'); $(this).children('.aria-accordion-item').slideToggle(); }); ..那就是..所以您的代码应该是这样的

[id^=acc-group]
  

^表示选择id acc-group开头的所有元素   acc-group-您也可以使用{{1}}了解有关Selectors Here

的更多信息

答案 1 :(得分：1)

您可以使用"[id^='acc-group-']"提供id属性以acc-group-开头的元素。

＆＃13;
＆＃13; 
    
$('[id^="acc-group-"] > .aria-accordion').click(function() {
  $(this).closest('[id^=acc-group]').find('.aria-accordion.open').not(this).removeClass('open').children('.aria-accordion-item').slideUp();
  $(this).toggleClass('open');
  $(this).children('.aria-accordion-item').slideToggle();
});
＆＃13; 
.aria-accordion {
  margin-bottom: 30px;
  position: relative;
}

.corner-stripes {
  content: '';
  background: url(../img/new_corner_stripes.svg);
  background-repeat: no-repeat;
  width: 120px;
  position: absolute;
  z-index: 3;
  top: 0;
  right: -10px;
  overflow: hidden;
  height: 58px;
  -webkit-transition: all 400ms linear;
  -moz-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  -ms-transition: all 400ms linear;
  transition: all 400ms linear;
}

.aria-accordion.open .corner-stripes {
  height: 120px;
}

.aria-accordion-item {
  background: #e8e8e8;
  padding: 25px 30px;
  display: none;
  margin-bottom: 30px;
}

.aria-accordion-trigger h6 {
  cursor: pointer;
  margin: 0;
  padding: 15px 0;
  text-indent: 70px;
  position: relative;
  font-size: 20px;
  color: #000;
  background: #e8e8e8;
  background-position: top left;
  background-size: cover;
  z-index: 1;
}

a.aria-accordion-trigger {
  position: relative;
  display: block;
}

a.aria-accordion-trigger::before {
  position: absolute;
  left: 10px;
  top: -10px;
  width: 43px;
  height: 49px;
  background: rgba(252, 221, 0, 0.8);
  content: '\f067';
  font-family: fontAwesome;
  font-size: 25px;
  text-align: center;
  line-height: 49px;
  z-index: 2;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}

.aria-accordion.open a.aria-accordion-trigger::before {
  content: '\f068';
}

a.aria-accordion-trigger:hover::before,
.aria-accordion.open a.aria-accordion-trigger::before {
  background: #00b3e3;
}

.aria-accordion ul {
  margin-left: 24px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="acc-group-1">

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend.</p>
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique <a id="target">senectus et netus</a> et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
        mi vitae est. Mauris placerat eleifend.</p>
    </div>
  </div>

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique <a id="target">senectus et netus</a> et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
        mi vitae est. Mauris placerat eleifend.</p>
    </div>
  </div>


  <hr/>
</div>

<div id="acc-group-2">

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend.</p>
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique <a id="target">senectus et netus</a> et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
        mi vitae est. Mauris placerat eleifend.</p>
    </div>
  </div>

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique <a id="target">senectus et netus</a> et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
        mi vitae est. Mauris placerat eleifend.</p>
    </div>
  </div>


  <hr/>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您可以使用$each。

这样的事可能有用。请注意，这是未经测试的，但仍然可以让您了解如何使用该方法。

$('.aria-accordion').each(function() {
  $(this).on('click', function() {
    $(this).find('open').removeClass('open').children('.aria-accordion-item').slideUp();
    $(this).toggleClass('open');
    $(this).children('.aria-accordion-item').slideToggle();
  });
});
相关问题
最新问题