引导程序折叠链接的toggle类jquery



使用Bootstrap,我试图在de accordon打开时从链接切换类。这是我的代码

<div class="mix category-2" data-myorder="1"> 
  <div class="row">
    <a  class="toggle" data-toggle="collapse" data-target="#collapsed1">
    <h3>Lorem ipsum dolor sit amet</h3>
    <div class="col-lg-2"><img src="images/logo.png" class="img-responsive"></div>
    <div class="col-lg-8">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.lorem</p></div>
    </a>
    <div class="col-lg-2">
      <ul class="fa-ul meta">
        <li><span class="glyphicon glyphicon-time"></span>Date</li>
        <li><span class="glyphicon glyphicon-tag"></span>Category</li>
        <li><span class="glyphicon glyphicon-user"></span>Auteur</li>
      </ul>
      <ul class="fa-ul linkto list-inline test-right">
        <li><a class="btn" href="#"><i class="fa fa-external-link "></i></a></li>
        <li><a class="btn" href="#"><i class="fa  fa-cloud-download "></i></a></li>
        <li><a class="btn toggle" data-toggle="collapse" data-target="#collapsed1"><i class="fa fa-chevron-down "></i></a></li>
      </ul>        
    </div>
  </div>
  <div class="row collapse" id="collapsed1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

我试图将.linktotoogle类中的.toggle链接定为活动状态,但我得到的最好结果是所有链接都处于活动状态。

如何仅针对正确的链接?现在,我是如何得到它的:

$( "a.toggle" ).click(function() {
    $(".linkto a.toggle").toggleClass( "active" ); 
});

好的,你想点击第一个"a"并激活"ul"中相同的重复:

引导:http://www.bootply.com/134054

JS

$( "a.toggle" ).click(function() {
  $(".linkto a.toggle[data-target=#collapsed1]").toggleClass( "active" ); 
});

或:

$(".linkto a.toggle[data-target="+$(this).attr('data-target')+"]").toggleClass( "active" ); 

最新更新