停止写相同功能的多次

所以我可能会扔我这里的狮子，但...停止写相同功能的多次

我只是不知道如何写在下面，所以我不必重复功能的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>

来源

2017-06-14 Satrop

你可以使用一个在'ACC-组'所以你不要查询“开头”不需要处理所有的数字https://stackoverflow.com/questions/2178416/using-starts-with-selector-on-individual-class-names –

您可以使用"[id^='acc-group-']"，让元素id财产下手acc-group-。

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

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

来源

2017-06-14 23:54:54

**真棒** 非常感谢你的帮助完美无缺！ – Satrop

你可以使用$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(); 
    }); 
});

来源

2017-06-14 23:53:02 Baruch

对于我来说，我认为没有必要使用.each()像其他答案建议..你可以只使用[id^=acc-group]选择和点击事件中从父[id^=acc-group]选择所有.aria-accordion.open类，你需要使用.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-你可以阅读更多有关Selectors Here

来源

2017-06-14 23:58:15

停止写相同功能的多次

回答

相关问题