Question

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

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

我试图将.toggle和.linkto类中的toogle链接定位到活动状态，但我的最佳结果是我所有链接上的活动状态。

我如何只定位正确的链接？现在，我就是这样的：

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

Answer 1

好的，你想点击第一个'a'并激活'ul'中相同的重复：

Bootply ：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" );

bootstrap collapse链接切换类jquery

1 个答案: